React returns "Cannot read property "名称“未定义”。（获取 API）

Question

我一直在尝试构建一个 React 应用程序，该应用程序使用 fetch 从 api 中获取随机人员数据集。尝试输出数据时 - 10 次中有 7 次 returns “TypeError：无法读取未定义的属性 'name'”。不知何故（我猜是因为严格模式） - 该函数总是被调用两次。第一次它几乎总是 returns undefined 我猜这是搞砸了过程。

我在所有与编码相关的事情上都是初学者 - 所以我很想知道如何查明问题以及我能做些什么来解决它。

function App() {
  const url = "https://randomuser.me/api/";

  const [person, setPerson] = useState();

  const getPerson = async () => {
    const response = await fetch(url);
    const data = await response.json();
    const person = data.results[0];
    const { title, first, last } = person.name;
    const { age, date } = person.dob;
    const { country, city, postcode } = person.location;
    const { name, number } = person.location.street;
    const { phone, email } = person;

    const newPerson = {
      name: title + " " + first + " " + last,
      dob: age + ", " + date,
      street: name + number,
      location: city + " " + postcode,
      country: country,
      phone: phone,
      email: email,
      picture: person.picture.large,
    };

    setPerson(newPerson);
  };

  useEffect(() => {
    getPerson();
  }, []);

  return (
    <Container>
      <Header />
      <Main>
        <Card>
          <CardHeader />
          <CardInnerContainer data={person} />
          <CardFooter />
        </Card>
      </Main>
      <Footer />
    </Container>
  );
}

export default App;

const CardInnerContainer = (props) => {

  return (
    <div className="card-inner-container">
      <div className="card-applicant-container">
        <p className="name">{props.person.name}</p>
        <p className="dob-age">{props.person.dob}</p>
        <p className="street">{props.person.street}</p>
        <p className="location">{props.person.location}</p>
        <p className="country">{props.person.country}</p>
        <p className="phone">{props.person.phone}</p>
        <p className="email">{props.person.email}</p>
      </div>
    </div>
  );
};

export default CardInnerContainer;

错误信息：

TypeError: Cannot read property 'name' of undefined
CardInnerContainer

   4 | return (
   5 |   <div className="card-inner-container">
   6 |     <div className="card-applicant-container">
>  7 |       <p className="name">{props.person.name}</p>
     | ^   8 |       <p className="dob-age">{props.person.dob}</p>
   9 |       <p className="street">{props.person.street}</p>
  10 |       <p className="location">{props.person.location}</p>

Answer 1

需要有条件地渲染以person为prop的组件

       { person && <CardInnerContainer data={person} /> }

像这样。所以它可以在你获取并设置人物后呈现。

React returns "Cannot read property "名称“未定义”。（获取 API）

React returns "Cannot read property "name" of undefined." (Fetch API)

javascript

object

reactjs

fetch-api

React returns "Cannot read property "名称“未定义”。 （获取 API）

React returns "Cannot read property "name" of undefined." (Fetch API)

javascript

object

reactjs

fetch-api

React returns "Cannot read property "名称“未定义”。（获取 API）