无法读取未定义的属性（读取 'name'）/（读取 'location'）

Question

如何解决'Cannot read properties of undefined (reading 'name')' 和 (reading 'location') 一样的错误，我不明白。

招摇过市：https://test-front.framework.team/api-docs/#/%2Flocations/locations

codesandbox: https://codesandbox.io/s/elem-1f5t5

我希望正确显示项目块，以及我从 API

获得的所有信息

import "./styles.css";
    import { useEffect, useState } from "react";

const App = () => {
  const baseURL = "https://test-front.framework.team/";
  const [items, setItems] = useState([]);
  const [authors, setAuthors] = useState([]);
  const [locations, setLocations] = useState([]);

  useEffect(() => {
    fetch("https://test-front.framework.team/paintings")
      .then((res) => res.json())
      .then(
        (result) => {
          setIsLoaded(true);
          setItems(result);
          console.log("paintings");
        }
      );
    fetch("https://test-front.framework.team/authors")
      .then((res) => res.json())
      .then(
        (result) => {
          setIsLoaded(true);
          setAuthors(result);
          console.log("authors");
        }
      );
    fetch("https://test-front.framework.team/locations")
      .then((res) => res.json())
      .then(
        (result) => {
          setIsLoaded(true);
          setLocations(result);
          console.log("locations");
        }
      );
  }, []);

  const result = items.map((elem) => {
    return {
      author: authors.find((author) => author.id === elem.authorId).name,
      created: elem.created,
      id: elem.id,
      imgUrl: elem.imgUrl,
      location: locations.find((location) => location.id === elem.locationId)
        .location,
      name: elem.name
    };
  });

  return (
    <div className="App">
      {result.map((elem) => (
        <div key={elem.id} className={"item"}>
          <img src={`${baseURL}${elem.imageUrl}`} />
          <li className={"cardInfo"}>
            <ul>{elem.name}</ul>
            <ul> {elem.author}</ul>
            <ul>{elem.created}</ul>
            <ul>{elem.location}</ul>
          </li>
        </div>
      ))}
    </div>
  );
};

export default App;

Answer 1

因为它在请求之前呈现页面并且项目是一个空数组，您可以像这样在 useEffect 中设置结果：

  useEffect(() => {
    fetch("https://test-front.framework.team/paintings")
      .then((res) => res.json())
      .then(
        (result) => {
          setIsLoaded(true);
          setItems(result);
          console.log("paintings");
        }
      );
    fetch("https://test-front.framework.team/authors")
      .then((res) => res.json())
      .then(
        (result) => {
          setIsLoaded(true);
          setAuthors(result);
          console.log("authors");
        }
      );
    fetch("https://test-front.framework.team/locations")
      .then((res) => res.json())
      .then(
        (result) => {
          setIsLoaded(true);
          setLocations(result);
          console.log("locations");
        }
      );

  const result = items.map((elem) => {
    return {
      author: authors.find((author) => author.id === elem.authorId).name,
      created: elem.created,
      id: elem.id,
      imgUrl: elem.imgUrl,
      location: locations.find((location) => location.id === elem.locationId)
        .location,
      name: elem.name
    };
  });
  }, []);

或者您可以在请求完成时设置一个布尔状态，然后使用 jsx 映射您的项目：

import "./styles.css";
    import { useEffect, useState } from "react";

const App = () => {
  const baseURL = "https://test-front.framework.team/";
  const [items, setItems] = useState([]);
  const [authors, setAuthors] = useState([]);
  const [locations, setLocations] = useState([]);
  const [hasItemsArrived , SetHasItemsArrived] = usestate(false)

  useEffect(() => {
    fetch("https://test-front.framework.team/paintings")
      .then((res) => res.json())
      .then(
        (result) => {
          setIsLoaded(true);
          setItems(result);
          setHasItemsArrived(true);
          console.log("paintings");
        }
      );
    fetch("https://test-front.framework.team/authors")
      .then((res) => res.json())
      .then(
        (result) => {
          setIsLoaded(true);
          setAuthors(result);
          console.log("authors");
        }
      );
    fetch("https://test-front.framework.team/locations")
      .then((res) => res.json())
      .then(
        (result) => {
          setIsLoaded(true);
          setLocations(result);
          console.log("locations");
        }
      );
  }, []);

  
 

  return (
    <div className="App">
      {hasItemsArrived && items.map((elem) => (
        <div key={elem.id} className={"item"}>
          <img src={`${baseURL}${elem.imageUrl}`} />
          <li className={"cardInfo"}>
            <ul>{elem.name}</ul>
            <ul> {elem.author}</ul>
            <ul>{elem.created}</ul>
            <ul>{elem.location}</ul>
          </li>
        </div>
      ))}
    </div>
  );
};

export default App;

Answer 2

从项目数组获取图像元素的值到结果时出现问题。我已经更新了您的代码沙箱并且所有必需的属性都正确显示。请验证。

无法读取未定义的属性（读取 'name'）/（读取 'location'）

Cannot read properties of undefined (reading 'name') / (reading 'location')

javascript

fetch

async-await

reactjs