当React

Question

我有一个表格，在编辑时显示有关票证的信息。票证是作为对象从API接收的，在我的例子中是数据（例如，apiUrl：{ticket：＆＃39; / api / tickets＆＃39;}）。 data包含故障单的所有默认状态，例如：priority，status和type。所有API数据都在TicketForm组件中进行管理。请参阅下面的组件代码： 类TicketForm扩展Component {     构造函数（道具）{         超级（道具）;         this.handleSelectChange = this.handleSelectChange.bind（this）;         this.save = this.save.bind（this）;         this.state = {             apiUrl：{门票：＆＃39; / api /门票＆＃39;}，             数据：{                 id：＆＃39;＆＃39;，                 票：＆＃39;＆＃39;，                 关键：＆＃39;＆＃39;，                 优先： {                     id：＆＃34;＆＃34;，                     名称：＆＃34;＆＃34;                 }，                 状态： {                     id：＆＃34;＆＃34;，                     名称：＆＃34;＆＃34;                 }，                 类型：{                     id：＆＃34;＆＃34;，                     名称：＆＃34;＆＃34;                 }             }，             优先： []，             状态： []，             类型：[]         };     }     componentWillMount（）{         //从API获取JSON     }     保存（） {         //保存/更新数据到服务器     }     handleSelectChange（e）{         for（var i = 0; i＆lt; this.state [e.target.name] .length; i ++）{             if（this.state [e.target.name] [i] .id == e.target.value）{                 this.state.data [e.target.name] = this.state [e.target.name] [i];             }         }         this.setState（{data：this.state.data}）;     }     render（）{         回来（             ＆lt; table className =＆＃34; table table-striped＆＃34;＆gt;                 ＆LT; TBODY＆GT;                 ＆LT; TR＆GT;                     ＆LT的第i;优先级：其中/第＆GT;                     ＆LT; TD＆GT;                         ＆LT; SelectForm                             的onChange = {this.handleSelectChange}                             命名=＆＃34;优先级＆＃34;                             选项= {this.state.priority}                             选定= {this.state.data.priority.name} /＆GT;                     ＆LT; / TD＆GT;                 ＆LT; / TR＆GT;                 ＆LT; TR＆GT;                     ＆LT的第i;状态：其中/第＆GT;                     ＆LT; TD＆GT;                         ＆LT; SelectForm                             的onChange = {this.handleSelectChange}                             命名=＆＃34;状态＆＃34;选项= {this.state.type}                             选定= {this.state.data.type.name} /＆GT;                     ＆LT; / TD＆GT;                 ＆LT; / TR＆GT;                 ＆LT; TR＆GT;                     ＆LT的第i;类型：其中/第＆GT;                     ＆LT; TD＆GT;                         ＆LT; SelectForm                             的onChange = {this.handleSelectChange}                             命名=＆＃34;类型＆＃34;                             选项= {this.state.status}                             选定= {this.state.data.status.name} /＆GT;                     ＆LT; / TD＆GT;                 ＆LT; / TR＆GT;                 ＆LT; / tbody的＆GT;             ＆LT; /表＆gt;         ）     } } 我想在点击元素时编辑此信息，然后我渲染一个＆lt; select＆gt;使用从API接收的一些选项作为数组，可以为字段应用不同的选项：优先级，状态和类型。这是与上述不同的API（例如：apiUrl：{ticket：＆＃39; / api / tickets / type＆＃39;}）。选择该选项后，我从所选对象中获取数据并将其替换为初始数据对象。请参阅下面的SelectForm组件： export default class SelectForm extends Component {     构造函数（道具）{         超级（道具）;         this.state = {             编辑：false         };     }     editProject（）{         this.setState（{edit：true}）;     }     blurProject（）{         this.setState（{edit：false}）;     }     handleChange（e）{         if（this.props.onChange）{             this.props.onChange（E）;         }     }     renderForm（）{         回来（             ＆LT;选择                 的className =＆＃34;形状控制＆＃34;                 名称= {this.props.name}                 的onChange = {this.handleChange.bind（本）}                 的onblur = {this.blurProject.bind（本）}＆GT;                 {（Array.isArray（this.props.options）＆amp;＆amp; this.props.options.length＆gt; 0）？ this.props.options.map（option =＆gt; {                     回来（                         ＆lt; option key = {option.id} value = {option.id}＆gt; {option.name}＆lt; / option＆gt;                     ）                 }）:(＆lt; option＆gt;找不到选项＆lt; / option＆gt;）}             ＆LT; /选择＆GT;         ）     }     render（）{         if（this.state.edit）{             return this.renderForm（）;         } else {             回来（                 ＆lt; p onClick = {this.editProject.bind（this）}＆gt; {this.props.selected}＆lt; / p＆gt;             ）         }     } } 我正在尝试处理更改事件。从select中选择其他选项时，根据所选择的选项设置状态，并在选择选项后在字段中显示新状态。 我以为我实现了这一点，但不知何故，这些领域在他们之间表现得很奇怪。优先级似乎工作正常，但每当我从类型中选择一个选项时，状态就会改变而不会触及它，反之亦然。 我无法理解是什么问题，请查看handleSelectChange（）函数逻辑，并告诉我做错了什么，或者针对这个问题的一些解决方案。 更新： 在答案中找到，关于Immutability Helpers的文档将有所帮助。我试图从链接中使用一个例子，但我得到了相同的结果。请查看代码，如果我做得对，请告诉我： handleSelectChange（e）{     for（var i = 0; i＆lt; this.state [e.target.name] .length; i ++）{         if（this.state [e.target.name] [i] .id == e.target.value）{             var newState = update（this.state，{                 数据：{                     [e.target.name]：{$ set：this.state [e.target.name] [i]}                 }             }）;         }     }     this.setState（newState）; }

Answer 1

您需要使用immutable helpers或创建这样的新对象：

this.setState(Object.assign({}, this.state, newState))

<强> UPD： 尝试做这样的事情：

handleSelectChange(e) {
  const data = Object.assign({}, this.state.data)

  data[e.target.name] = e.target.value;
  for (var i = 0; i < data[e.target.name].length; i++) {
      if (data[e.target.name][i].id == e.target.value) {
          data[e.target.name] = data[e.target.name][i];
      }
  }

  this.setState({ data });
}

Answer 2

尝试并使用for循环中定义的handleSelectChange()来实现setState()。由于您要设置状态数据值，因此无法像this.state.data[e.target.name] = this.state[e.target.name][i];那样使用setState()

handleSelectChange(e) {
            this.state.data[e.target.name] = e.target.value;
            var self = this;
            for (var i = 0; i < this.state[e.target.name].length; i++) {
                if (this.state[e.target.name][i].id == e.target.value) {
                    self.setState({data: {[e.target.name]: this.state[e.target.name][i]}});

                }
                self.setState({data: self.state.data});
            }

        }