[建议升级至1.3.29或之后的版本]map循环中使用自定义组件props无法更新

[moonou]

问题描述

在map中使用自定义组件，并在自定义组件中指定state中的值为props，在state更新时，组件内部接收到的props没有被更新。

复现步骤

1. 设置一个state 默认值
2. 在文本框中更新state值
3. 观察更新结果

// Board.tsx
import {
  View
} from '@tarojs/components'

const Board = (props) => {
  console.log(props)

  return <View>props: {props.name}</View>
}

export default Board

// index.tsx
state = {
    name: 'foo'
  }

  render () {
    return (
      <View className='index'>
        {
          [1,2,3].map((i) => {
            return (
              <View key={i}>
                <Input onInput={(e) => {
                  this.setState({
                    name: e.detail.value
                  })
                }}></Input>
                <Board name={this.state.name}></Board>
              </View>
            )
          })
        }
      </View>
    )
  }

期望行为

在通过文本框更新state后子组件能同步更新

报错信息

无

系统信息

补充信息

默认值可以显示，只是在更新时无法更新。
测试写法在微信小程序上可以得到期望运行结果，字节跳动小程序无法得到期望结果。

[taro-bot]

CC @Chen-jj

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[moonou]

1.3.25版本没有这个问题

[shenghanqin]

@moonou 我是写过微信和抖音小程序的，我是觉得抖音小程序的坑挺多的，我建议你用react Component写法来写，尽量减少函数式组件来写，总感觉坑会更多。我就在解决自己业务中的抖音的两个状态不同步的问题。加油。

[moonou]

@moonou 我是写过微信和抖音小程序的，我是觉得抖音小程序的坑挺多的，我建议你用react Component写法来写，尽量减少函数式组件来写，总感觉坑会更多。我就在解决自己业务中的抖音的两个状态不同步的问题。加油。

感谢你的回复，我尝试将子组件换成类的方式类编写，也不能解决这个问题。一起加油～😃

[shenghanqin]

抖音小程序的写法相当严格，render方法中不要有2个return，状态设置要非常清晰，安卓老版本也可能会出现各种小问题。你得加油啦。

[taro-bot]

Hello~

您的问题楼上已经有了确切的回答，如果没有更多的问题这个 issue 将在 15 天后被自动关闭。

如果您在这 15 天中更新更多信息自动关闭的流程会自动取消，如有其他问题也可以发起新的 Issue。

Good luck and happy coding~

[moonou]

抱歉。这个issue没有被解决啊，先不要打上answered。

[happyjosh]

抱歉。这个issue没有被解决啊，先不要打上answered。

遇到相同的问题了，兄弟解决了吗？

[Chen-jj]

@moonou 1.3.29 修复

48b8271

[taro-bot]

Hello~

您的问题楼上已经提供了解决方案，如果没有更多的问题这个 issue 将在 15 天后被自动关闭。

如果您在这 15 天中更新更多信息自动关闭的流程会自动取消，如有其他问题也可以发起新的 Issue。

Good luck and happy coding~

[shenghanqin]

我来备注一下。