React Hooks：状态没有在函数中更新答案

【问题标题】：React Hooks: State Is Not Updating in FunctionReact Hooks：状态没有在函数中更新
【发布时间】：2021-07-09 17:27:37
【问题描述】：

我花了几个小时试图解决这个问题，但没有成功。我有一个可重用的组件，它以任何空对象的状态开始，该对象被赋予一系列基于道具的属性，然后根据用户在每组单选按钮上的输入将显示一个子组件。

不幸的是，应该更新状态的功能将触发用户是否看到子组件。

我相信问题出在我的 editDisplay 函数中。目前，当我单击其中一个单选按钮时，应该成为新状态的新对象已正确记录到控制台，但是当我使用 React Devtools 检查页面时，我发现状态没有更新。话虽如此，我可能会看到一个我误解 useEffect 的情况，也许每次运行 editDisplay 时都在运行 useEffect。任何帮助将不胜感激。

import React, {useState, useEffect} from 'react'
import {Form} from 'react-bootstrap'
import RatingInput from './RatingInput'

export default function MembershipForm({inputs, name, record, setRecord}) {

  const [display, setDisplay] = useState({})

  useEffect(()=>{
      inputs.forEach(input => {
          var newDisplay = display
          newDisplay[name+input]=false
          setDisplay(newDisplay)})
  },[])

    const editDisplay = (input, visible) => {
        var newDisplay =display
          newDisplay[name+input]=visible
          console.log(newDisplay)
          setDisplay(newDisplay)
    }

    const questions=inputs.map(input => {
        return (
            <div key={name+input}>
                <Form.Group>
                    <Form.Label className='mx-2'>Do you have a {name} {input} Rating?</Form.Label>
                    <Form.Check inline label='Yes' value={true} name={name+input} type='radio' className = 'mx-2' onClick ={() =>{editDisplay(input, true)}} />
                    <Form.Check inline label='No' value ={false} name={name+input}  type='radio' className = 'mx-2' defaultChecked onClick = {() =>{editDisplay(input, false)}}  />
                </Form.Group>
                {display[name+input] && <RatingInput input={input}/>}
                
            </div >
        )
    })

    return (
        <div className='ml-3'>
            {questions}
        </div>
    )
}

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

 const editDisplay = (input, visible) => {
        var newDisplay = display
          newDisplay[name+input]=visible
          console.log(newDisplay)
          setDisplay(newDisplay)
    }

您应该以不可变的方式执行反应状态更新。你在上面所做的是你正在改变现有的状态变量（第一行的赋值并没有增加太多：newDisplay 指的是与display 相同的对象）。在这种情况下，react 可能无法检测到变化。改为这样做：

    var newDisplay = { ... display };

【讨论】：