React：从状态中删除动态输入，重新渲染

Question

我在调试这种情况时遇到问题。我正在尝试从 API 提供的数组中删除索引。在检查其父级的道具更改后，我将其存储在父级状态中。这里一切都很好。我可以将任何道具更改存储在父表单状态中。

父表单映射templateData中的所有内容，我确定它是什么类型，然后根据需要渲染一个组件。

删除按钮将始终只在DynamicInputGroup中，因此我通过道具向下传递该功能。在DynamicInputGroup中，我需要映射从父级传递的数组，然后映射该数组中的对象以显示每个单独的输入。再次使用传递下来的道具来确定要渲染的输入，与父级相同。

这是出了问题的地方。当我单击删除时，假设索引 2（共 5 个），我看到该索引在状态中被删除，但呈现的是索引 5 被删除。我不确定该怎么做。我已经完成研究并阅读了密钥发挥作用？我试图将渲染函数中的一个变量设置为状态，这样它就会刷新，但什么也没有。最后一个索引总是被删除。哈！

家长表格

this.state = {

    templateData: []

}

removeGroupItem = (index, inputName ) => {

    let group = `${inputName}__group`

    const newState = this.state;

    if (index === -1) return;

    newState.templateData[group].splice(index, 1);

    console.log(newState) // THIS SHOWS CORRECT STATE

    this.setState(newState);

}

render() {

    return (

      {Object.keys(this.state.templateData).map((name, key) => {

          let data = { // SETTING inputType TO DISPLAY CORRECT COMPONENT }

          return (

              <Fragment key={key}>

                  {data.inputType == 'input' && <DynamicTextInput {...data} />}

                  {data.inputType == 'rtf' && <DynamicRTF {...data}  />}

                  {data.inputType == 'img' && <DynamicImageUpload {...data} />}

                  {data.inputType == 'group' && <DynamicInputGroup {...data} removeGroupItem={this.removeGroupItem} />} // COMPONENT THAT HOLDS REMOVE BUTTON

              </Fragment>

          )

      })}

    )

}

动态输入组组件

this.state = {

    value: []

}

componentDidMount() {

    this.setState({ value: this.props.value })

}

componentDidUpdate(prevProps) {

    if (this.props.value !== prevProps.value) {

        this.setState({

            value: this.props.value

        })

    }

}

Answer 1

使用索引作为组件的键是一种不好的做法，尤其是当它是一个不断变化的列表时。键应该是组件的唯一标识符。如果您的控件没有唯一标识符，您可以基于时间戳创建一个标识符，某种 uuid，您将存储在您的状态中，并且始终只引用一个控件元素。想象一下，您有 1 个输入元素的值为 的情况TextInput 1。然后你从它添加另一个输入，它继承它的密钥。现在您已经破坏了影子 DOM，因为您引用的是新输入而不是旧输入，因为带有 key={0} 的输入的值为TextInput 1，但这不是您所期望的，因为您想要引用另一个输入。

Answer 2

这一行有问题：<Fragment key={key}>由于您使用数组的索引来呈现那些Fragments，协调失败length次数和“最后一个元素”被删除。