功能组件在状态改变时不重新呈现

Question

我希望重新呈现该组件的特定部分(在JSX的.map中)，这取决于我的optionObject的哪个值被设置为true。

任何关于我哪里出错的想法都将非常感激-对React/功能组件仍然有点陌生。

const [optionObject, setOptionObject] = useState(
{
'one' : false,
'two' : false,
'three' : true,
}
)
function switchOption(selectedOption) {
var objectCopy = optionObject;
for (const [key, value] of Object.entries(objectCopy)) {
if (key !== selectedOption) {
objectCopy[key] = false;
}
else {
objectCopy[key] = true;
}
}
setOptionObject(objectCopy);
}
return (
<>
<div className={styles.browseOptions}>
<div onClick={()=>switchOption(1)} className={`${styles.option} ${optionObject['one'] ? styles.active : ''}`}><h3>One</h3></div>
<div onClick={()=>switchOption(2)} className={`${styles.option} ${optionObject['two'] ? styles.active : ''}`}><h3>Two</h3></div>
<div onClick={()=>switchOption(3)} className={`${styles.option} ${optionObject['three] ? styles.active : ''}`}><h3>Three</h3></div>
{multi_grid_tiles_data?.map((grid, i) => {
if (optionObject[grid['parent']['name']])
return (
<div key={"gridList-"+i}>
<GridList grid_data={grid_data}/>
</div>
);
})}
</>
);

Answer 1

change

var objectCopy = optionObject;

var objectCopy = {...optionObject};

由于前者不复制对象，它只是指向现有的对象引用，因此它是同一个对象。后者创建一个新的对象引用，并将旧的内容扩展到其中。

为了让你的组件基于状态更新的对象进行渲染，它必须是一个新的对象引用。(数组也一样)