对象作为React子级(API、JSON)[duplicate]无效

Question

`
    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;

`

Answer 1

我认为问题是在您的文章组件，检查您如何处理名称道具。

您应该将其视为对象：

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

也可以传递其中一个键:title、first、last

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