Question

import React from 'react'

export default function App(){
    const[flag,setFlag] =React.useState({1:false,2:false})

    const change=(id)=>{
        flag[id] = !flag[id]
        setFlag(flag)
        console.log(flag)
    }

    return(
        <div>
            {flag[1] ? <p>this is true</p> : <p>this is false</p>}
            <button onClick={()=>change(1)}>Change</button>
        </div>
    )
}

我想根据标志状态更改输出。虽然标志JSON发生了变化，但是并没有重新呈现。

Answer 1

您的代码运行正常。

const change=(id)=>{
   console.log(flag[id]);
        flag[id] = !flag[id]
        setFlag(flag)
        console.log(flag)
    }

您可以检查渲染方法吗？

在此处https://codepen.io/palash924332931/pen/VwYpwOq?editors=1111

Answer 2

您应该使用setFlag()来更改状态，而不是直接更改flag。通过将设置器用于flag状态，如果使用render()，则可以调用setFlag()。为了在当前设置中使用setFlag()，您可以像这样使用computed property names：

const change = id => {
  setFlag(currentFlag => ({[id]: !currentFlag}));
}

Answer 3

如果您设置的新值等于当前值，则useState返回的状态更新程序将不会重新渲染组件的子级。 https://reactjs.org/docs/hooks-reference.html#bailing-out-of-a-state-update

    function App() {
  const [flag, setFlag] = React.useState({ 1: false, 2: false });

  const change = id => {
    var newFlag = Object.assign({}, flag);
    newFlag[id] = !flag[id];
    setFlag(newFlag);
  };
  return (
    <div>
      {flag[1] ? (
        <p>this is true</p>
      ) : (
        <p>this is false</p>
      )}
      <button onClick={() => change(1)}>Change</button>
    </div>
  );
}

codepen example

在react js中更改状态后如何重新呈现？

3 个答案: