SelectedColumn 值不在 CustomHeader 组件中。但是,setSelectedColumn 有效!为什么🧐? 此外,我将 CustomHeader 传递给使用 useMemo 的常量 组件。没有 useMemo CustomHeader 就不起作用。
const [selectedColumn, setSelectedColumn] = useState(null);
console.log("selected Column Outside:", selectedColumn); // It works!
const CustomHeader = (props) => {
const colId = props.column.colId;
console.log("selected Column In CustomHeader:", selectedColumn); // Doesn't work
return (
<div>
<div style={{float: "left", margin: "0 0 0 3px"}} onClick={() => setSelectedColumn(props.column.colId)}>{props.displayName}</div>
{ selectedColumn === colId ? <FontAwesomeIcon icon={faPlus} /> : null}
</div>
)
}
const components = useMemo(() => {
return {
agColumnHeader: CustomHeader
}
}, []);
更新:如果我在 CustomHeader 组件中使用 useState Hook ,它会向每一列添加一个“+”号,并且不会从前一列中删除。这是一张图片:
最佳答案
阅读您的评论后,您的问题显然与您希望将 useState 放在哪里有关。
首先,您应该始终将 useState 放在组件中。但就您而言,显然您要实现的是当您选择一列时,其他列将被取消选择。
因此,您需要将 selectedColumn
和 setSelectedColumn
作为 props 传递给您的组件,并在父组件上创建 useState。
假设您所有的 CustomHeader
组件共享相同的父组件,在我的示例中我将调用 CustomHeadersParent
,您应该这样做:
// added mock headers to have a working example
const headers = [
{
displayName: "Game Name",
column: {
colId: 1,
},
},
{
displayName: "School",
column: {
colId: 2,
},
},
];
const CustomHeadersParent = (props) => {
const [selectedColumn, setSelectedColumn] = useState(null);
return headers.map((h) => (
<CustomHeader
column={h.column}
displayName={h.displayName}
setSelectedColumn={setSelectedColumn}
selectedColumn={selectedColumn}
/>
));
};
const CustomHeader = (props) => {
const colId = props.column.colId;
return (
<div>
<div
style={{ float: "left", margin: "0 0 0 3px" }}
onClick={() => props.setSelectedColumn(props.column.colId)}
>
{props.displayName}
</div>
{props.selectedColumn === colId ? <FontAwesomeIcon icon={faPlus} /> : null}
</div>
);
};
const components = useMemo(() => {
return {
agColumnHeader: CustomHeader,
};
}, []);
关于javascript - useState 不更新组件中传递的状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/73567390/