如何用状态中的另一个对象更新状态中的对象的状态

Question

我有一个视图表，它显示了数据库中每一行的一些数据。 最后有两个按钮：“编辑”和“删除”。

当您按下“编辑”（Modifica）按钮时，将显示一个模式，其中有一个带有 select 属性的输入，允许您选择从数据库中挑选的确定元素。在我的例子中，因为我按下了编辑按钮，所以我将它设置为用表格中包含的那个来填充它。

在状态下，我有一个对象数组和我想要更新的对象(id_tipo)，基于我在输入字段中选择的内容：所以我的问题是我不知道如何更新 id_tipo 的状态

constructor(props) {
    super(props);
      this.state = {
      id_tipo:'',
      tipo_attivita: '',

     TipiAttivita:[]
     };

获取数据：

                async componentDidMount(){
              //Im using Promiss.all for multiple calls

         Promise.all([
               await fetch("http://localhost:5000/api/azienda/tipiattivita"), // this is the fetch that interests us
               await fetch("http://localhost:5000/api/azienda/orario"),
               await fetch("http://localhost:5000/api/azienda/aziende"),
               await fetch("http://localhost:5000/api/azienda/urgenza"),
               await fetch("http://localhost:5000/api/azienda/azienda_utente"),
               await fetch("http://localhost:5000/api/azienda/utente")
            ])
            .then(([res1, res2, res3, res4, res5, res6]) => Promise.all([res1.json(), res2.json(), res3.json(), res4.json(), res5.json(), res6.json()]))
            .then(([data1, data2, data3, data4,data5,data6]) => this.setState({

              TipiAttivita: data1, // there's the object in question

                //To avoid confusion I removed these objects from the state
                Orario: data2,
                Azienda: data3,
                Urgenza: data4,
                AziendaUtente: data5,
                Utente: data6

            }));

 if(this.props.item){
            const {id_tipo, tipo_attivita} = this.props.item
            this.setState({ id_tipo , tipo_attivita})
          }
        }

在render() 中，我创建了这段代码来映射数组内的元素：

const tipiattivita = this.state.TipiAttivita.map(item => {

       return (
       <option key={item.id_tipo_attivita} >{item.tipo_attivita}</option>

        )
  })

然后我将数据传递给 Input 选择：

   <Input type="select" name="tipo_attivita" id="tipo_attivita" onChange={this.onChange}  value={this.state.tipo_attivita=== null ? '' : this.state.tipo_attivita}  >
          {tipiattivita}
    </Input>

当我在选择中按下对象时，我从与前一个视图表中的元素相同的表中选择一个元素，所以一开始当我按下编辑按钮并且模态显示id_tipe(id state在打开模态表单之前）不同于id_tipo_attivita（数组中元素的id）。我想做的是，如果选择的数据与他之前的状态不同（id_tipo !== id_tipo_attivita），将它们都设置为相同。

当我尝试这样做时

<option key={this.state.id_tipo=item.id_tipo_attivita}

显示此警报

Do not mutate state directly. Use setState() react/no-direct-mutation-state)

等待回复。 非常感谢您的帮助

Answer 1

至于您要做什么，我认为更好的方法是将 id 传递给 onChange 回调并在该 onChange 回调函数上设置模态表单的状态值。

例如：

onChange={ (e, item) => this.onChange(e, item.id_tipo_attivita) }

请参考为什么您会收到直接状态突变的警告/消息：

您正在更改以下行中的状态值：

<option key={this.state.id_tipo=item.id_tipo_attivita}

这是不允许的/不推荐的（出于多种原因）。我建议您使用 componentDidUpdate 或 setState 方法的回调来根据其他状态值（如果需要）设置状态值。