Question

我有

function randomNum(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

  var default_variables = {
                        a: randomNum(2,9),
                        b: randomNum(1,9),
                        c: randomNum(2,9)
                      }
  const [variables,setVariables] = useState(default_variables)

  function refreshVariables(){
    setVariables({ ...variables,
                  a: randomNum(2,9),
                  b: randomNum(1,9),
                  c: randomNum(2,9)
                })
  }

和

                <Button 
                  variant="contained" 
                  color="primary"
                  onClick= {refreshVariables}
                  >
                  Refresh
                </Button>
                <div>{variables.a},{variables.b},{variables.c}</div>

我可以看到刷新时 chrome devtools 中的状态不断变化，但组件没有使用更改后的值重新渲染

我什至尝试过

    setVariables(prevState => ({
      ...prevState,
      a: randomNum(2,9),
      b: randomNum(1,9),
      c: randomNum(2,9)
    }));

Answer 1

尝试删除“...变量”，

另一件事是写

 onClick= {()=>{refreshVariables}}

代替

onClick= {refreshVariables}

reactjs：使用对象的状态，值不会改变

1 个答案: