如何让 SetState 停止覆盖我的组件标签答案

【问题标题】：How can I get SetState to stop overwriting my component tags如何让 SetState 停止覆盖我的组件标签
【发布时间】：2020-02-05 23:59:08
【问题描述】：

我在我的 react native 应用程序中使用这些标签：https://github.com/peterp/react-native-tags 作为一个反应新手，我对 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 重新渲染，所以标签永远不会被添加/覆盖，我只会留下一个 3121 标签。或者也许我是一个反应新手并且不知道。

感谢任何帮助。

谢谢

【问题讨论】：

标签： react-native tags setstate

【解决方案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 是一种工作零食

【讨论】：

天哪，我很接近。谢谢你让我越线。给你金星。