Javascript 在react js中更改状态后如何重新渲染？ 从“React”导入React 导出默认函数App（）{ const[flag，setFlag]=React.useState（{1:false，2:false}） 常量更改=（id）=>{ 标志[id]=！标志[id] 设置标志（标志） console.log（标志） } 返回( {flag[1]？

这是真的

：这是假的

} 更改（1）}>更改 ) }

---

我想根据标志状态更改输出。虽然标志JSON正在更改，但它不会重新呈现。

您的代码工作正常

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

---

你能检查一下渲染方法吗

---

选中此处

您应该使用

setFlag（）

来更改状态，而不是直接更改

标志

。通过使用

标志

状态的setter，如果使用

setFlag（）

，则可以调用

render（）

。要在当前设置中使用

setFlag（）

，您可以这样使用：

---

如果设置的新值等于当前值，则useState返回的状态更新程序将不会重新引发组件的子级

函数应用程序（）{
const[flag，setFlag]=React.useState（{1:false，2:false}）；
const change=id=>{
var newFlag=Object.assign（{}，flag）；
newFlag[id]=！flag[id]；
setFlag（newFlag）；
};
返回(
{标志[1](
这是真的

) : (
这是假的

)}
更改（1）}>更改
);
}

---

更改标志后，am使用setFlag（标志）。您能解释一下您的答案吗？通过设置setFlag（{flag:flag}），它将在json中创建json。在functional component中，我们不应该这样设置状态。您可以检查渲染方法吗？我已经看到它工作正常。代码在给定的url中共享。

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

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

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