开发者问题收集

React:TypeError 无法读取未定义的属性(读取‘0’)

2022-10-30
1375

我正在开发一个 React App,并且尝试使用 axios GET 请求从我的节点后端获取一些数据。

我当前正在使用的与此问题相关的 Api 端点如下:

// NodeJS Backend
app.get('/v1/companys/user/:user_uuid', verify, (req, res) => { // GET - Company by User UUID
    const selectQuery = 'SELECT * FROM companys WHERE uuid = (SELECT company_uuid FROM users WHERE uuid = ?)';
    connection.query(selectQuery, [req.params.user_uuid], (err, results) => {
        if(err) {
            res.send(err)
        } else if (results.length === 0) {
            res.json({status: 404, message: 'Company not found'})
        } else {
            res.json({data: results})
        }
    });
});

这是我的前端:

// ReactJS FrontEnd
const companyLogo = userCompany ? userCompany.logo_url : null;

  console.log(userCompany);

  useEffect(() => {
    const getUserCompany = async () => {
      try {
        await axios.get(process.env.REACT_APP_API_URL + 'companys/user/' + userUuid).then((response) => {
          console.log("response "+ response);
          let res = response.data.data[0];
          console.log(res);
          setUserCompany(res);
        });
      } catch (error) {
        console.log(error);
      }
    };
    getUserCompany();
  }, [userUuid]);

应用程序运行良好,但在控制台上出现以下错误:

错误下方的对象实际上是我需要的东西 ( companyLogo )

我想知道是否有人知道我在前端做错了什么来修复 TypeError。

谢谢你的帮助!

在此处输入图片描述

1个回答

如果您使用 可选链接 ( ?. ) 来捕获可能的 null / undefined 值,则很可能会解决该问题。

因此像这样: let res = response.data.data?.[0];

Tim van Dam
2022-10-30