Question

所以我正在练习React并想显示一个“ Arya的杀戮列表”，我想使其能够更新。因此，在我的ToKill组件中，当您双击一个字符时，它将显示带有值的输入。但是无法更新它们。

我在主App组件中编写了一个函数，它看起来像这样：

    const toKillPpl = { ...this.state.toKill }
    toKillPpl[index] = updatedToKill
      this.setState({ toKillPpl })
  }

接下来，我将其传递给状态为TopillList的组件：

            doubleClick = {this.doubleClickHandler}
            deleteToKill = {this.deleteToKillHandler}
            backBtn = {this.backBtnHandler} 
            state = {this.state}
            toKillState = {this.state.toKill}
            update = {this.toKillUpdate}
          />

在我的ToKillList组件中，我映射了我的状态，并通过一个人的状态（toKillPerson）传递了此函数：

const ToKillList = (props) => props.state.toKill.map((toKill, index) => {
  return <ToKill 
    double ={() => props.doubleClick(index)}
    formDouble={toKill.formDouble}
    click ={() => props.deleteToKill(index)}
    backBtn ={() => props.backBtn(index)}
    key={index + toKill.name}
    index={index}
    toKillPerson ={props.toKillState[index]}
    update={props.update}
    name={toKill.name}
    cause={toKill.cause}
    img={toKill.img} 
    />
  })

最后，在我的ToKill组件中，我编写了一个函数“ handleChange”：

handleChange = (e) => {
    const updatedToKill = {
        ...this.props.toKillPerson,
        [e.currentTarget.name]: e.currentTarget.value
    }
    this.props.update(this.props.index, updatedToKill)
}

这是输入：

<input 
      type="text"
      name="name"
      className="hero-name" 
      onChange={this.handleChange} 
      value={this.props.name}
   />
<input 
      type="text"
      name="img"
      onChange={this.handleChange} 
      value={this.props.img}
   />
<input 
      type="text"
      name="cause"
      className="hero-cause" 
      onChange={this.handleChange} 
      value={this.props.cause}
   />

它不起作用。这是一个好方法，还是我完全搞砸了？

如果我不清楚，这里是一个github存储库：https://github.com/jakubmas/Aryas-Kill-List

Answer 1

代码中的更新方法有两次更正。

1）您没有正确复制对象

const toKillPpl = { ...this.state.toKill }

这将创建一个浅表副本，您需要对此进行深克隆。您可以使用JSON.strigify或lodash deepClone方法。

2）您不会更新正在传递给子组件的toKill状态。

这是更新的方法：

  toKillUpdate = (index, updatedToKill) => {
    // const toKillPpl = JSON.parse(JSON.stringify(this.state.toKill)); // use this
    const toKillPpl = _.cloneDeep(this.state.toKill); // or this
    toKillPpl[index] = updatedToKill;
    this.setState({ toKill: toKillPpl });
  };

这是工作中的codesandbox link

希望有帮助！

Answer 2

执行此操作的另一种方法是，您可以导入immutability-helper（https://github.com/kolodny/immutability-helper），并使用它来更新state.toKill而不对其进行更改：

import update from 'immutability-helper';

// Assuming 'updateToKill' input is an object...
handleUpdate = (index, updatedToKill) => {
    this.setState(prevState => ({
        toKill: update(prevState.toKill, {
            [index]: {
                $set: updatedToKill,
            },
        }),
    }));
};

如何更新数组中特定索引的状态

2 个答案: