[英]useState doesn't update state passed in component
The SelectedColumn value doesn't come in the CustomHeader component. SelectedColumn值不在CustomHeader组件中。 However, setSelectedColumn works?
但是, setSelectedColumn有效吗? Why, Also, I'm passing CustomHeader to constant components that use useMemo.
为什么,另外,我将CustomHeader传递给使用 useMemo 的常量组件。 Without useMemo CustomHeader doesn't work.
没有 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
}
}, []);
UPDATE: If I use the useState hook inside the CustomHeader component, it adds a "+" sign to each column and does not remove from the previous one.更新:如果我在CustomHeader组件中使用 useState 挂钩,它会在每一列中添加一个“+”号,并且不会从前一列中删除。 Here is a picture:
这是一张图片:
You should use hooks inside your component您应该在组件中使用钩子
const CustomHeader = (props) => {
const colId = props.column.colId;
const [selectedColumn, setSelectedColumn] = useState(null);
console.log("selected Column In CustomHeader:", selectedColumn); // Should 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>
)
}
After reading your comment, your issue is clearly about where you want to place your useState.阅读您的评论后,您的问题显然是关于您想要放置 useState 的位置。
First of all, you should always place useState inside a component.首先,您应该始终将 useState 放在组件中。 But in your case, apparently what you're trying to achieve is that when you select a column, the other columns get deselected.
但在您的情况下,显然您想要实现的是,当您 select 列时,其他列被取消选择。
Therefore, you need to pass both selectedColumn
and setSelectedColumn
as props to your component, and create the useState on the parent component.因此,您需要将
selectedColumn
和setSelectedColumn
作为 props 传递给您的组件,并在父组件上创建 useState。
Assuming all your CustomHeader
components share the same parent component, in which my example I'll call CustomHeadersParent
, you should do something like this:假设您的所有
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,
};
}, []);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.