Блог

Главная - Вопросы по программированию - Как мне изменить значение формы и значение состояния при использовании перехватов, а состояние изменяется в другом компоненте в react

Как мне изменить значение формы и значение состояния при использовании перехватов, а состояние изменяется в другом компоненте в react

#javascript #reactjs #react-hooks

#javascript #reactjs #реагирующие перехваты

Вопрос:

У меня есть приложение, которое обновляет состояние в дочернем компоненте с помощью функции setBrewLog, которая была установлена с помощью useState

const [brewLog, setBrewLog] = useState([{ og: '' }]) .

В инструментах react-dev я вижу, что состояние обновляется, а внутри useEffect я вижу, что компонент повторно отображается, но поле формы не обновляется. Кроме того, Formik решает эту проблему?

Я получаю сообщение об ошибке в консоли Chrome.

Компонент изменяет контролируемый ввод текста типа на неконтролируемый. Входные элементы не должны переключаться с управляемых на неконтролируемые (или наоборот). Решите, использовать ли контролируемый или неконтролируемый элемент ввода в течение срока службы компонента.

Вот упрощенная версия моего кода.

 export const Brewlog = () => {
  const [brewLog, setBrewLog] = useState({ og: '' })

  const onBrewLogChanged = e => {
    const tempBrewLog = [...brewLog]
    
    tempBrewLog[e.target.id[e.target.id.length - 1]][e.target.name] = e.target.value
    setBrewLog(tempBrewLog)
  }
  // useEffect is triggered when the Child component updates state.
  useEffect(() => {
    console.log(brewLog)
  })
  return(
   <> 
    <h3>Brewlog</h3>
    <Child setBrewLog={setBrewLog} />
          <label htmlFor='og' >Original gravity</label>
           //Does not update on state change
          <p> is:{brewLog.og}</p>
          <input 
            type="text" 
            name='og'
            id='og0'
            //does not update on state change 
            placeholder={brewLog.og} 
            value={brewLog.og}
            onChange={onBrewLogChanged}
          />
    <button type="button" onClick={''} >
      Save Recipe
    </button>
  </>
  )
}

const Child = ( props ) => {
  const [message, setMessage] = useState('')
  
  const ChangeState = () => {
    props.setBrewLog([{ og: '1' }])
     setMessage('OG is 1')
    },
    
  return (
    <div>
      <button type='button' onClick={ChangeState}>Start</button>
      <p>{message}</p>
    </div>
  )
}
export default Child

Спасибо вам за ваши идеи

Комментарии:

1. Вы инициализируете состояние как объект useState({ og: '' }) , а затем обновляете его с помощью массива? props.setBrewLog([{ og: '1' }]) Какой должна быть структура, к которой вы стремитесь? Если это массив, то brewLog.og так будет всегда undefined .

2. Исходная структура — это объект, но я планирую перейти к динамической форме и использовать массив для хранения объектов формы. Спасибо, что заметили использование двух разных структур. Это в конечном итоге исправило ситуацию.

Ответ №1:

Как указала Эмили Бержерон, я использовал две разные структуры для своего состояния. Изменение их обоих на объект решило проблему.