反应：如何在setState上更新state.item [1]？（使用JSFiddle）

Question

我正在创建一个应用程序，用户可以在其中设计自己的表单。例如，指定字段名称以及应包括哪些其他列的详细信息。

该组件在此处可作为JSFiddle使用。

我的初始状态如下：

var DynamicForm = React.createClass({

  getInitialState: function() {

   var items = {};

   items[1] = { name: 'field 1', populate_at: 'web_start',

                same_as: 'customer_name',

                autocomplete_from: 'customer_name', title: '' };

   items[2] = { name: 'field 2', populate_at: 'web_end',

                same_as: 'user_name', 

                    autocomplete_from: 'user_name', title: '' };

     return { items };

   },

  render: function() {

     var _this = this;

     return (

       <div>

         { Object.keys(this.state.items).map(function (key) {

           var item = _this.state.items[key];

           return (

             <div>

               <PopulateAtCheckboxes this={this}

                 checked={item.populate_at} id={key} 

                   populate_at={data.populate_at} />

            </div>

            );

        }, this)}

        <button onClick={this.newFieldEntry}>Create a new field</button>

        <button onClick={this.saveAndContinue}>Save and Continue</button>

      </div>

    );

  }

我想在用户更改任何值时更新状态，但是我很难定位正确的对象：

var PopulateAtCheckboxes = React.createClass({

  handleChange: function (e) {

     item = this.state.items[1];

     item.name = 'newName';

     items[1] = item;

     this.setState({items: items});

  },

  render: function() {

    var populateAtCheckbox = this.props.populate_at.map(function(value) {

      return (

        <label for={value}>

          <input type="radio" name={'populate_at'+this.props.id} value={value}

            onChange={this.handleChange} checked={this.props.checked == value}

            ref="populate-at"/>

          {value}

        </label>

      );

    }, this);

    return (

      <div className="populate-at-checkboxes">

        {populateAtCheckbox}

      </div>

    );

  }

});

我应该如何this.setState进行更新items[1].name？

Answer 1

错误的方法！handleChange = (e) => {&nbsp; &nbsp; const { items } = this.state;&nbsp; &nbsp; items[1].name = e.target.value;&nbsp; &nbsp; // update state&nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; &nbsp; items,&nbsp; &nbsp; });};正如许多更好的开发人员在评论中指出的：改变状态是错误的！花了我一段时间来解决这个问题。以上工作，但它带走了React的力量。例如，componentDidUpdate由于它是直接修改的，因此不会将其视为更新。因此正确的方法是：handleChange = (e) => {&nbsp; &nbsp; this.setState(prevState => ({&nbsp; &nbsp; &nbsp; &nbsp; items: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...prevState.items,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [prevState.items[1].name]: e.target.value,&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; }));};