reactjs 失败的 prop 类型:prop `rows`在`ForwardRef(DataGrid)`中被标记为必需,但其值为`undefined`

r3i60tvu  于 2023-04-29  发布在  React
关注(0)|答案(1)|浏览(130)

代码为:

return (
    <div className="datatable">
      <div className="datatableTitle">
        Add New User
        <Link to="/users/new" className="link">
          Add New
        </Link>
      </div>
      <DataGrid
        className="datagrid"
        rows={list}
        columns={userColumns.concat(actionColumn)}
        pageSize={9}
        rowsPerPageOptions={[9]}
        checkboxSelection
        getRowId = { (row)=>row._id}
      />
    </div>
  );

我正在从lamadev的youtube教程中创建一个预订MERN应用程序。我不知道这里出了什么问题。

8hhllhi2

8hhllhi21#

你需要在这里初始化数组:
const [list, setList] = useState();
成为
const [list, setList] = useState([]);
这是因为React的工作方式。第一次运行代码时,你的fetch不会返回一个值。
阅读React生命周期。https://www.w3schools.com/react/react_lifecycle.asp
如果你用一个加载指示器阻塞了screnshot中代码的执行,那么你的错误就是当你捕获时,你完全忽略了这个错误。所以记录错误并处理它。
要使页面呈现为没有任何列表数据,请执行rows={list ?? []}以确保列表为空而不是null/undefined。

相关问题