reactjs中状态改变后如何重新渲染？

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状态使用 setter，如果使用setFlag() ，则可以调用render() setFlag() 。 为了在当前设置中使用setFlag() ，您可以使用计算属性名称，如下所示：

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

Answer 3

如果您设置的新值等于当前值，则 useState 返回的状态更新程序将不会重新渲染组件的子组件。 https://reactjs.org/docs/hooks-reference.html#baiiling-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>
  );
}

代码笔示例