javascript - 动态呈现的可触摸不随状态值变化而更新

Question

概括

我正在尝试制作一个反应原生颜色选择器组件，它将放置一个边框，围绕该边框选择一个。该组件允许编码器传递他们想要使用的颜色数组，因此我通过将数组传递给渲染方法来动态渲染它。

方法

我处理显示哪个被选中的方式-我将每个颜色组件的borderWidth设置为一个状态为全0的数组。单击它时，我将某个索引设置为 1。但是，这并不能正确更新宽度。该数组正在正确更改，但它没有更新可触摸的宽度。

代码：

for (let i = 0; i < this.colorPallete.length; ++i) {
  this.nums.push(i);
  this.circles.push(
    <React.Fragment key={i}>
      <TouchableHighlight
        onPress={() => {
          this.selectCircle(i);
        }}
        style={[
          styles.colorCircle,
          {
            borderWidth: this.state.bgWidth[i],
            borderColor: this.colorPallete[i],
          },
        ]}>
        <View
          style={[
            styles.innerCircle,
            {
              backgroundColor: this.colorPallete[i],
              borderColor: this.colorPallete[i],
            },
          ]}
        />
      </TouchableHighlight>
    </React.Fragment>
  );
}

}

Answer 1

您可以尝试在 selectedCircle 更改时强制更新：

例子：

componentWillUpdate(nextProps) {
  const { selectedCircle } = this.props;
  if (selectedCircle !== nextProps.selectedCircle) {
    this.forceUpdate();
  }
}