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>
  );
}

代碼筆示例