如何在 JSON 数组中渲染第 n 个 object：ReactJS

Question

我正在尝试从以下 JSON 中显示流行语（它在公司下）

{
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org",
    "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
    }
  }

我正在尝试使用以下代码访问 JSON：

export default function Posts() {
    const [posts, setPosts] = useState([])
    const [user, setUser] = useState([])
    const [activePost, setActivePost] = useState([]);
    
    useEffect (() => {
      return fetch('https://jsonplaceholder.typicode.com/posts')
      .then((response) => response.json())
      .then((json) => setPosts(json));
    });

    const displayPosts = () => {
        return posts.map((post) => {
            return <Post setActivePost={setActivePost} setUser={setUser} key={post.id} title={post.title} id={post.userId} body={post.body}></Post>
        })
    }
return (
        <div>
            <h2>Posts</h2>
            {displayPosts()}
            <Modal activePost={activePost} userName={user.name} catchPhrase={user.company.catchPhrase}></Modal>
        </div>
    );
}

import React, { useState } from 'react';
import Modal from './Modal';

export default function Post(props) {
    const onClick = () => {
        props.setActivePost(props);
        return fetch(`https://jsonplaceholder.typicode.com/users/${props.id}`)
      .then((response) => response.json())
      .then((json) => props.setUser(json))
      .then(()=> {
        const backDrop = document.querySelector('.backdrop');
        const modal = document.querySelector('.modal');
        modal.style.display = "block" 
        backDrop.style.display = "block"
        backDrop.addEventListener('click', () => {
            modal.style.display = "none" 
            backDrop.style.display = "none"
        } )   
      })
    };
    
    return (
        <div>   
            <h3 onClick={onClick}>{props.title}</h3> 
        </div>
    )
}

我以为我可以使用“user.company.catchPhrase”获取该数据，但它返回未定义。 如果有人对如何从 object 公司获取流行语属性有意见，我将不胜感激。

Answer 1

在您的第一次渲染中， user state 是一个空数组。 所以你不能访问user.company.catchPhrase并且你得到undefined 。

在访问user.company.catchPhrase之前放置条件，您将获得所需的 output。

喜欢，

user.company && user.company.catchPhrase

这会给你价值

Answer 2

你这里有几个问题。

1. 您错误地调用useEffect 。 你这样做的方式将触发无限循环的重新渲染，因为没有什么能阻止useEffect在每次渲染时被调用。 你应该这样调用：

useEffect(() => {
    return fetch("https://jsonplaceholder.typicode.com/posts")
      .then((response) => response.json())
      .then((json) => setPosts(json));
  }, []);

注意空的[]作为第二个参数。

2. 在实际设置用户变量之前，您甚至不应该渲染该Modal元素，这仅在您单击任何帖子时发生。 因此，我实际上会将您的用户变量设置为null最初如const [user, setUser] = React.useState(null); . 然后将 Modal 渲染部分更改为如下所示：

{user && <Modal
        activePost={activePost}
        userName={user.name}
        catchPhrase={user.company.catchPhrase}
      ></Modal>}

这应该可以正常工作。