我怎样才能让 SetState 停止覆盖我的组件标签

Question

我在我的 React 本机应用程序中使用这些标签：https://github.com/peterp/react-native-tags 作为一名 React 菜鸟，我对 SetState 有疑问。我已经设置了这样的标签：

<Tags
      initialText=""
      textInputProps={{
           placeholder: "Servicable Postcodes"
      }}
      initialTags={["3121"]}
      onChangeTags={(tags) => this.changeTags(tags)}
      inputStyle={{ backgroundColor: "white", borderBottomWidth: 1 }}
      renderTag={({ tag, index, onPress, deleteTagOnPress, readonly }) => (
           <TouchableOpacity key={${tag}-${index}} onPress={onPress}>
                <Text style={styles.tagStyle}>{tag}</Text>
           </TouchableOpacity>
      )}
 />

 changeTags(newtags) {
      //this.setState({ myTags: newtags.toString()});
      var tagList = newtags.toString();
      /*this.setState({myTags: tagList}, function () {
           console.log(this.state.myTags);
      });*/
  }

添加标签是这样的 [3121] [1111] [2222]

因此该代码运行良好。一旦我取消对 setState 的注释，它就会运行一切正常，但标签不会添加到列表中。因此，如果我添加 1111，我的控制台日志将是 3121, 1111（但 1111 不会显示为标签）然后如果我尝试添加另一个，它将是 3121, 2222 等

我认为因为它使用 setState 重新呈现，标签永远不会 added/overwritten 并且我一直只剩下单个 3121 标签。或者也许我是一个反应菜鸟，不知道。

感谢任何帮助。

谢谢

Answer 1

您说得对，每次渲染都会导致 Tag 组件重置回 3121。

为避免这种情况，您需要像这样将当前标签存储在您的状态中：

export default class App extends React.Component {
  state = { tags: ['3121'], myTags: "3121" }; // This line

  render() {
    return (
      <View style={styles.container}>
        <Tags
          initialText=""
          textInputProps={{
            placeholder: 'Servicable Postcodes',
          }}
          initialTags={this.state.tags} // This line
          onChangeTags={tags => this.changeTags(tags)}
          inputStyle={{ backgroundColor: 'white', borderBottomWidth: 1 }}
          renderTag={({ tag, index, onPress, deleteTagOnPress, readonly }) => (
            <TouchableOpacity key={`${tag}-${index}`} onPress={onPress}>
              <Text style={styles.tagStyle}>{tag}</Text>
            </TouchableOpacity>
          )}
        />
      </View>
    );
  }

  changeTags(newtags) { // This function
    this.setState({ tags: newtags, myTags: newtags.toString() }, () =>
      console.log(this.state)
    );
  }
}

这意味着对于每个渲染（每次在您调用 setState 时添加标签时都会发生），Tag 组件将渲染您存储在状态中的标签。

我还在您所在的州加入了另一个名为 myTags 的成员，它映射到您的标签的字符串值，因为从您之前的代码看来这是必需的。

Here是工作零食

我怎样才能让 SetState 停止覆盖我的组件标签

How can I get SetState to stop overwriting my component tags

tags

setstate

react-native