Question

React 应用程序显示无法读取未定义的属性“map”

2021-08-09

152

javascript reactjs

无法获取我的 api 数据，但我可以控制台并查看数据。我得到的只是“TypeError：无法读取未定义的属性‘map’”。有任何语法错误吗？

这是我的 useEffect 以及 Axios get

  const categories = useSelector((state) => state.categories);
  const dispatch = useDispatch();

  useEffect(() => {
    axios
      .get("admin/category")
      .then((res) => {
        console.log(res, "data from categories");
        dispatch({
          type: actions.GET_CATEGORIES,
          payload: res.data.categories,
        });
      })
      .catch((err) => {
        console.log(err, "error");
      });
  }, []);

映射此表中的数据

<TableBody>
 {categories.map((item, index) =>
                    {
                     return  (
                      <React.Fragment key={index}>
                        <TableRow style={{ position: "relative" }}>
                          <TableCell
                            className="contents"
                            align="left"
                            style={{
                              borderBottom: "none",
                              paddingLeft: "5%",
                              paddingBottom: "0%",
                              paddingTop: "0%",
                            }}
                          >
                            {item.name}
                          </TableCell>

Answer 1

categories 最初将未定义。您可以做的一件事是将回退设置为空数组：

const categories = useSelector((state) => state.categories || []);

或者在商店内部，将初始状态设置为空数组作为一次性集中解决方案。

Answer 2

我认为在渲染第一个组件时类别未定义。您应该按如下方式更改代码。已添加？

 {categories?.map((item, index) =>
                    {
                     return  (
                      <React.Fragment key={index}>
                        <TableRow style={{ position: "relative" }}>
                          <TableCell
                            className="contents"
                            align="left"
                            style={{
                              borderBottom: "none",
                              paddingLeft: "5%",
                              paddingBottom: "0%",
                              paddingTop: "0%",
                            }}
                          >
                            {item.name}
                          </TableCell>

Answer 3

您的类别未定义，因此您需要在呈现时添加控件。

您可以直接控制一个：

 <TableBody>
 {categories?.map((item, index) =>
                    {
                     return  (
                      <React.Fragment key={index}>
                        <TableRow style={{ position: "relative" }}>
                          <TableCell
                            className="contents"
                            align="left"
                            style={{
                              borderBottom: "none",
                              paddingLeft: "5%",
                              paddingBottom: "0%",
                              paddingTop: "0%",
                            }}
                          >
                            {item.name}
                          </TableCell>

或者您可以使用 if else 并且可以渲染不同的东西：

 <TableBody>
         {categories && categories.length > 0 ? 
                    categories.map((item, index) =>
                            {
                             return  (
                              <React.Fragment key={index}>
                                <TableRow style={{ position: "relative" }}>
                                  <TableCell
                                    className="contents"
                                    align="left"
                                    style={{
                                      borderBottom: "none",
                                      paddingLeft: "5%",
                                      paddingBottom: "0%",
                                      paddingTop: "0%",
                                    }}
                                  >
                                    {item.name}
                                  </TableCell>
                              </TableRow>
                         </React.Fragment>
                     ) : 
                     'Categories not found'';