Как обновить состояние объекта в состоянии с другим объектом в состоянии

Question

У меня есть view-таблица, которая показывает некоторые данные из базы данных для каждой строки. В конце есть две кнопки: «Редактировать» и «Удалить».

При нажатии кнопки «Редактировать» (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 type="select" name="tipo_attivita" id="tipo_attivita" onChange={this.onChange}  value={this.state.tipo_attivita=== null ? '' : this.state.tipo_attivita}  >
          {tipiattivita}
    </Input>

Когда я нажимаю объект в select, я выбираю элемент из той же таблицы, что и элемент в предыдущей view-таблице, поэтому вначале, когда я нажимаю кнопку редактирования, и появляется модальное окно id_tipe (идентификатор перед открытием модальной формы) отличается от id_tipo_attivita (идентификатор элементов в массиве). я хотел бы, чтобы выбранные данные отличались от его предыдущего состояния (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, чтобы установить значение состояния на основе других значений состояния (если это необходимо).