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

Question

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

当您按下“编辑”(Modifica)按钮时，将显示一个模式，其中有一个带有选择属性的输入，允许您选择从数据库中选取的确定元素。就我而言，由于我按下了编辑按钮，因此我将其设置为使用表中包含的内容进行填充。

在状态下，我有一个对象数组和我想要更新的对象 (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 type="select" name="tipo_attivita" id="tipo_attivita" onChange={this.onChange}  value={this.state.tipo_attivita=== null ? '' : this.state.tipo_attivita}  >
          {tipiattivita}
    </Input>

当我按下选择中的对象时，我会从与前一个 View 表中的元素相同的表中选择一个元素，因此在开始时，当我按下编辑按钮时，模式会显示 id_tipe (打开模态表单之前的id状态)与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 方法的回调来根据其他状态值设置状态值(如果需要)。