Question

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

不幸的是，应该更新状态然后触发用户是否看到子组件的函数不起作用。

我相信问题出在我的 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>
    )
}

Answer 1

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

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

    var newDisplay = { ... display };

React Hooks：状态未在函数中更新

1 个答案: