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状态）与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方法的回调来根据其他状态值（如果需要）设置状态值。

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

1 个答案: