为了账号安全,请及时绑定邮箱和手机立即绑定

反应:如何在setState上更新state.item [1]?(使用JSFiddle)

反应:如何在setState上更新state.item [1]?(使用JSFiddle)

德玛西亚99 2019-10-15 10:02:04
我正在创建一个应用程序,用户可以在其中设计自己的表单。例如,指定字段名称以及应包括哪些其他列的详细信息。该组件在此处可作为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?
查看完整描述

3 回答

?
收到一只叮咚

TA贡献1821条经验 获得超4个赞

错误的方法!


handleChange = (e) => {

    const { items } = this.state;

    items[1].name = e.target.value;


    // update state

    this.setState({

        items,

    });

};

正如许多更好的开发人员在评论中指出的:改变状态是错误的!


花了我一段时间来解决这个问题。以上工作,但它带走了React的力量。例如,componentDidUpdate由于它是直接修改的,因此不会将其视为更新。


因此正确的方法是:


handleChange = (e) => {

    this.setState(prevState => ({

        items: {

            ...prevState.items,

            [prevState.items[1].name]: e.target.value,

        },

    }));

};


查看完整回答
反对 回复 2019-10-15

添加回答

代码语言

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信