对象作为 React 子项（API，JSON）无效 [重复]

Question

我无法显示我的 JSON (DataUser.name.first) 的属性

`
    import React, {useEffect,useState}from 'react';
    import Article from '../components/Article';
    import '../styles/containers/Home.scss';

    const Home = () => {
      const [DataUser, setDataUser] = useState("Cargando");

      useEffect(() => {
        const Cargar = async () => {
          let respuesta = await fetch(`https://randomuser.me/api/`);
          let respuestaJSON = await respuesta.json();
          setDataUser(respuestaJSON.results[0]);
        };
        Cargar();
      }, []);

      return (
        <>
          <div className='Home'>
            {console.log(DataUser.gender)} /*:)*/
            {console.log(DataUser.name.first)} /*:(*/
          </div>
        </>
      );
    };
    export default Home;

`

我正在尝试将属性传递给反应中的组件，当我传递单元格编号时，一切正常。但是当我尝试传递名称时，我得到一个错误。

我的 JSON "results": [ { "gender": "male", "name": { "title": "Mr", "first": "Elliot", "last": "Thompson" }, }, ],

我想获取名称中的值。我看到的问题是我们在另一个对象中有一个对象。而不是对象内的数组。

Answer 1

我认为问题出在您的文章组件中，请检查您如何处理 name 属性。

你应该把它当作一个对象：

DataUser.name = {
  "title": "Miss",
  "first": "Zenóbia",
  "last": "da Paz"
}

或者你也可以传递其中一个键：title、first、last

<Article cell={DataUser.cell} name={DataUser.name.first}/>

如果无法解决，请附上组件代码。