想从后端获取特定值时面对错误做出反应

Question

我正在尝试从后端获取值，它显示完全正常并获取控制台中的所有属性，但是当我想访问特定值时它显示错误，但有时它工作我有尝试使用 useEffect 依赖项但仍然相同，错误是：未捕获类型错误：无法读取未定义的属性（读取 'eventName'）示例 JSON 格式：

0:{ eventFeeStudent：“34” eventName: "新事件" 事件通知日期：“2022-05-23T18:00:00.000Z” }

这里它工作正常，但是当我想捕获任何特定的密钥对时，比如 eventName，我收到错误消息。

const EventEditNavbar = () => {
  const { user } = useAuth();
  const [userInfo, setUserInfo] = useState({});
  console.log(userInfo);
  console.log(user);
  // console.log(userInfo[0].eventName);
  const eventName = userInfo[0].eventName;




  useEffect(() => {
    if (!user || !user.email) return
    const uri = `http://localhost:5000/findevents/?userEmail=${user.email}`;
    fetch(uri)
      .then((res) => res.json())
      .then((data) => setUserInfo(data));
  }, [user]);

  return (
    <Container>
      <div className="eventEdit_nav">
        <div className="eventEdit_nav_right">
          <Link to={`/festivals/${eventName}`}>View</Link>
          <Link to="/">Edit</Link>
          <Link to="">Manage</Link>
          <Link to="">Marketing</Link>
        </div>
        <div className="eventEdit_nav_left">
          <Link to="">Save</Link>
          <Link to="">List Event</Link>
        </div>
      </div>
    </Container>
  );
};

export default EventEditNavbar;

Answer 1

请记住，每当对象的属性正在 undefined 访问其子项时，将引发未捕获的错误，这意味着未定义的属性.

下没有任何内容

在你的例子中，你是用一个空对象 ({}) 启动 userInfo，所以首先是 userInfo[0]（当没有从server) 将是 undefined 并且当您尝试访问它的子节点时它会抛出错误。要解决这个问题，您可以使用 optional chaining，每当您尝试这样的事情时。

这样做可以解决您的问题：

const eventName = userInfo[0]?.eventName;

/* Whenever userInfo is undefined the eventName will
be set to undefined as well and it will prevent the
application from throwing an error when you try to
access userInfo child */

想从后端获取特定值时面对错误做出反应

react facing error when want to get specific value from back-end

reactjs

mern