删除标签文字时出现异常行为

Question

在我的项目中，我使用react-native-tags从用户那里获得了不同的颜色变种。

这是代码：

<View style={{ marginVertical: 10, marginLeft: 20, justifyContent: 'center' }}>
    <MText size={18}>Colors</MText>
</View>
<Tags
    initialText=""
    textInputProps={{
        placeholder: "Enter Color",
        blurOnSubmit:false
    }}
    initialTags={this.state.colors}
    createTagOnString={[","]}
    createTagOnReturn={true}
    onChangeTags={(tags) => {
        this.setState((prevState) => ({
            colors: tags
        }), () => this.handleVariantChanges());
    }}
    onTagPress={(index, tagLabel, event, deleted) => console.log(index, tagLabel, event, deleted ? "deleted" : "not deleted")
    }
    containerStyle={styles.tagContainer}
    inputStyle={{ backgroundColor: "white" }}
    renderTag={({ tag, index, onPress, deleteTagOnPress, readonly }) => (
        <TouchableOpacity style={styles.tag} onPress={onPress} key={index.toString()}>
            <Icon name="times" color="#aaa" />
            <MText>{' '}{tag}</MText>
        </TouchableOpacity>
    )}
/>

现在，在运行项目后，我添加了一些标签。标签已成功添加。然后，我继续添加另一个标签，但是拼写不正确，因此我删除了直到第一个字符，但是以前的标签也被自动删除了。

另一个问题是，如果我要在添加一些标签后删除标签，则无法删除该标签。

这是问题gif：

请帮助我这里出了什么问题!!!

注意：：仅当我将状态值用作initialTags时，才会发生此问题。如果我将initialTags保留为空白数组，则一切正常。

Answer 1

问题在于如何响应和响应本地标记。假设您有两个标签，并且正在输入文本。当您按下退格键时，删除还不是标签的文本的第一个字符，它将自动从数组中弹出第二个标签。由于您正在设置状态，因此将重新渲染组件，从而完全删除标签。

您可以通过使用shouldComponentUpdate并返回false来解决此问题

shouldComponentUpdate(nextProps, nextState) {
   return false;
 }

我建议为标记提供一个单独的组件，并在表单中使用该组件，并具有一个在触发onChangeTags时更新表单的回调。