使用钩子时如何重新呈现表单值和状态值，并且状态在不同的组件中发生变化答案

【问题标题】：How do I rerender form value and state value when using hooks and state is changed in a different component in react使用钩子时如何重新呈现表单值和状态值，并且状态在不同的组件中发生变化
【发布时间】：2021-02-03 20:27:06
【问题描述】：

我有一个应用程序，它使用 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

感谢您的见解

【问题讨论】：

您将状态初始化为对象useState({ og: '' })，然后用数组对其进行更新？ props.setBrewLog([{ og: '1' }]) 你的目标应该是什么结构？如果它是一个数组，那么brewLog.og 将永远是undefined。
原来的结构是一个对象，但我打算转向动态表单并使用数组来保存表单对象。感谢您发现两种不同结构的使用。最终解决了这个问题。

标签： javascript reactjs react-hooks

【解决方案1】：

正如 Emilie Bergeron 指出的那样，我的状态使用了两种不同的结构。将它们都更改为一个对象解决了这个问题。

【讨论】：