javascript - setState 新数据放入数组

Question

这可能是一个愚蠢的问题，所以我提前道歉。

我有一个小数组，我在其中使用 this.state.data.map() 对其进行迭代并将数据传递到输入中。我想编辑每个输入中的数据并保存新数据。由于它是一个数组，我怎样才能将这个新数据保存到数组中呢？哪种做法最好/最明智？

A live example here

下面是一个例子:

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      data: ["Saab", "Volvo", "BMW"],
      editMode: false
    };
  }

  handleInput = e => {
    let value = e.target.value;
    let name = e.target.name;
    console.log(name);
    console.log(value);

    this.setState(prevState => ({
      data: {
        ...prevState.data,
        [name]: value
      }
    }));
  };

  handleFormSubmit = e => {
    e.preventDefault();

    const { data } = this.state;
    console.log(data);
  };

  render() {
    return (
      <div className="App">
        <div>
          {!this.state.editMode ? (
            <button onClick={() => this.setState({ editMode: true })}>
              edit
            </button>
          ) : (
            <div>
              <button onClick={() => this.setState({ editMode: false })}>
                cancel
              </button>
              <button onClick={this.handleFormSubmit}>submit</button>
            </div>
          )}
        </div>

        <React.Fragment>
          {this.state.data.map((rule, index) =>
            this.state.editMode ? (
              <form onSubmit={this.handleFormSubmit}>
                <input
                  onChange={this.handleInput}
                  type="text"
                  placeholder="Cars"
                  name={rule}
                  defaultValue={rule}
                  key={index}
                />
              </form>
            ) : (
              <p key={rule}> - {rule} </p>
            )
          )}
        </React.Fragment>
      </div>
    );
  }
}

谢谢! :)

Answer 1

一种解决方案是将当前更改的项目的索引传递给事件处理程序，以确保您正在修改列表中的正确项目。

为此，更改您的 handleInput 以接受当前更改项目的 event 对象和 index。

handleInput = (e, index) => {
  const { data = [] } = this.state;
  let value = e.target.value;
  data[index] = value;
  this.setState({ data: data });
};

因此，您必须将输入 onChange 处理程序更改为此。

onChange={(event) => this.handleInput(event, index)}

参见 working example