如何在 ReactJs 的 useState 中使用 map 初始化数据？

Question

我是 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里面没有显示数据。

Answer 1

如果 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]);

Answer 2

尝试拆分您的代码。使用 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

如何在 ReactJs 的 useState 中使用 map 初始化数据？

How to initialize data using map inside useState in ReactJs?

reactjs

ag-grid

ag-grid-react

react-hooks

use-state