在反应中更新列表状态

Question

我正在构建一个 React 应用程序，我构建了几个 input fields。我正在尝试通过 state 更新他们的 value。但是每当我输入 field

时它都会创建一个新实例

App.js

class App extends React.Component {
    state = {
         fields = [
            {
               id: nextId(),
               value: '',
            },
            {
               id: nextId(),
               value: '',
            },
            {
               id: nextId(),
               value: '',
            },
       ]
    }

    updateValue = (evt) => {
        var item = Object.assign({}, this.state.fields[evt.target.id], {value: evt.target.value}

        var fields = this.state.fields;
        fields[evt.target.id] = item
        this.setState({fields: fields})
    }


    render() {
        return (

              {this.state.fields.map((values) => (
              <>
             <input id={values.id} value={values.value}  type="text" onChange={this.updateValue} />
             </>
           ))}

        )
    }
}

我已经尝试了很多次，但每次我更改字段并且不更新 list state 时它仍然在创建新实例。

我想做什么？

我正在尝试更新用户正在键入或写入的每个特定字段的状态值

我在使用 nextId()

的地方使用 react-id-generator

如有任何帮助，我们将不胜感激。

Answer 1

每当您使用数组状态并需要访问（编辑或删除）某个项目时，最好通过其索引访问它。所以 updateValue 实现看起来像这样。

updateValue = (index) => (event) => {
  // never mutate the state, clone the array first
  const newFields = JSON.parse(JSON.stringify(this.state.fields));

  // access the element by its index and update its value property
  newFields[index].value = event.target.value;

  // update the state
  this.setState({ fields: newFields });
};

class App extends React.Component {
  state = {
    fields = [
      {
        id: 1,
        value: '',
      },
      {
        id: 2,
        value: '',
      },
      {
        id: 3,
        value: '',
      },
    ],
  };

  updateValue = (index) => (event) => {
    let newFields = this.state.fields.slice(0);

    newFields[index].value = event.target.value;

    this.setState({ fields: newFields });
  };

  render() {
    return (
      <>
        {this.state.fields.map(({ id, value }, index) => (
          // call updateValue with the field's index
          <input id={id} onChange={this.updateValue(index)} value={value} />
        ))}
      </>
    );
  }
}

在反应中更新列表状态

Updating state of list in react

javascript

state

reactjs