如何在 ReactJs 的 useState 中使用 map 初始化数据?
How to initialize data using map inside useState in ReactJs?
我是 React 的新手,在我正在处理的作业中,我必须在 AG 网格中显示数据 table。为此,这就是我在 useState()
中初始化 rowData
的方式,但它没有显示在网页中。 table 是空的,只有列名。
const CommentTable: React.FC<CommentProps> = (props) => {
const { comments } = props;//comments is an array of an object named Comment.
const [rowData] = useState(comments.map(comment => {
return {
postName: comment.inputs.postName,
commentName: comment.name,
size: getSize(comment)
}
}));
const columnDefs = [
{ field: 'postName', headerName: 'Post Name' },
{ field: 'commentName', headerName: 'Comment Name' },
{ field: 'size', headerName: 'Size' }
]
}
return (
<div style={{height:'5000px', width:'100%'}}>
<AgGridReact
columnDefs={columnDefs}
rowData={rowData}
/>
</div>
)
useState()
里面的代码好像没有问题,但是我不明白为什么网页table里面没有显示数据。
如果 props.comments
是初始渲染周期中的填充数组,则将其映射到初始状态值的 useState
挂钩中应该有效。如果它在初始渲染中 not 可用,那么您将使用依赖于 props.comments
的 useEffect
挂钩在 [comments
] 更新时更新 rowData
状态。
const { comments } = props;
const [rowData, setRowData] = useState([]);
useEffect(() => {
setRowData(comments.map(comment => ({
postName: comment.inputs.postName,
commentName: comment.name,
size: getSize(comment)
})));
}, [comments]);
尝试拆分您的代码。使用 useState() 挂钩的声明和通过 useEffect() 挂钩的地图拆分。
示例:
const CommentTable: React.FC<CommentTableProps> = (props) => {
const [comments, setComments] = useState();
const [rowData, setRowData] = useState();
const columnDefs = [
{ field: 'postName', headerName: 'Post Name' },
{ field: 'commentName', headerName: 'Comment Name' },
{ field: 'size', headerName: 'Size' }
]
}
useEffect(() => {
setComments(props);
}, [props]);
useEffect(() => {
comments.foreach((scenario) => {
let row {
postName: comment.inputs.postName,
commentName: comment.name,
size: getSize(comment)
})
setRowData((rowData) => [...rowData, row])
}, [comments]);
return (
<div className="a-css-class" style={{height:'5000px', width:'100%'}}>
<AgGridReact
modules={AllModules}
columnDefs={columnDefs}
rowData={rowData}
/>
</div>
)
更多信息请访问:
useState() -> https://reactjs.org/docs/hooks-state.html
useEffect() -> https://reactjs.org/docs/hooks-effect.html
我是 React 的新手,在我正在处理的作业中,我必须在 AG 网格中显示数据 table。为此,这就是我在 useState()
中初始化 rowData
的方式,但它没有显示在网页中。 table 是空的,只有列名。
const CommentTable: React.FC<CommentProps> = (props) => {
const { comments } = props;//comments is an array of an object named Comment.
const [rowData] = useState(comments.map(comment => {
return {
postName: comment.inputs.postName,
commentName: comment.name,
size: getSize(comment)
}
}));
const columnDefs = [
{ field: 'postName', headerName: 'Post Name' },
{ field: 'commentName', headerName: 'Comment Name' },
{ field: 'size', headerName: 'Size' }
]
}
return (
<div style={{height:'5000px', width:'100%'}}>
<AgGridReact
columnDefs={columnDefs}
rowData={rowData}
/>
</div>
)
useState()
里面的代码好像没有问题,但是我不明白为什么网页table里面没有显示数据。
如果 props.comments
是初始渲染周期中的填充数组,则将其映射到初始状态值的 useState
挂钩中应该有效。如果它在初始渲染中 not 可用,那么您将使用依赖于 props.comments
的 useEffect
挂钩在 [comments
] 更新时更新 rowData
状态。
const { comments } = props;
const [rowData, setRowData] = useState([]);
useEffect(() => {
setRowData(comments.map(comment => ({
postName: comment.inputs.postName,
commentName: comment.name,
size: getSize(comment)
})));
}, [comments]);
尝试拆分您的代码。使用 useState() 挂钩的声明和通过 useEffect() 挂钩的地图拆分。
示例:
const CommentTable: React.FC<CommentTableProps> = (props) => {
const [comments, setComments] = useState();
const [rowData, setRowData] = useState();
const columnDefs = [
{ field: 'postName', headerName: 'Post Name' },
{ field: 'commentName', headerName: 'Comment Name' },
{ field: 'size', headerName: 'Size' }
]
}
useEffect(() => {
setComments(props);
}, [props]);
useEffect(() => {
comments.foreach((scenario) => {
let row {
postName: comment.inputs.postName,
commentName: comment.name,
size: getSize(comment)
})
setRowData((rowData) => [...rowData, row])
}, [comments]);
return (
<div className="a-css-class" style={{height:'5000px', width:'100%'}}>
<AgGridReact
modules={AllModules}
columnDefs={columnDefs}
rowData={rowData}
/>
</div>
)
更多信息请访问:
useState() -> https://reactjs.org/docs/hooks-state.html
useEffect() -> https://reactjs.org/docs/hooks-effect.html