了解 React.JS JSON 提要以及如何解析

Question

我有以下代码，它从 API 循环访问 JSON 文件并循环访问一些帖子。

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
//https://alligator.io/react/axios-react/
import axios from 'axios';

export default class PostList extends React.Component {
  state = {
    posts: []
  }

  componentDidMount() {
    axios.get(`https://jsonplaceholder.typicode.com/users`)
      .then(res => {
        const posts = res.data;
        this.setState({ posts });
      })
  }

  render() {
    return (
      <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h1 className="App-title">Welcome to React</h1>
          </header>
          <p className="App-intro">
           Pulls in post slugs from Domain
          </p>

          <ul>
            { this.state.posts.map(post => <li>{post.name} - {post.username} </li>)}
          </ul>
      </div>
    )
  }
}

这工作正常，并获得所需的信息。

现在，在我的测试 JSON 文件中，格式如下： https://jsonplaceholder.typicode.com/users

但在我来自 WordPress Rest API 的实际 JSON 文件中，我们还有另一个项目，名为 core_layout： JSON image

我的问题是，尝试使用相同的代码（例如 {post.name}）无法获得所需的信息，例如 core_layout->image->name。

有没有简单的方法解决这个问题？

谢谢大家！

编辑：

尝试了下面的答案，但仍然没有运气，得到错误 TypeError: Cannot read property 'map' of undefined:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
//https://alligator.io/react/axios-react/
import axios from 'axios';

export default class PostList extends React.Component {
  state = {
    posts: [],
    coreLayout: {}
  }

  componentDidMount() {
    axios.get(`https://jsonplaceholder.typicode.com/users`)
      .then(res => {
        // const posts = res.data;
        //this.setState({ posts });
        const { posts, core_layout: coreLayout } = res.data;
        this.setState({ posts, coreLayout });
      })
  }

  render() {
    return (
      <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h1 className="App-title">Welcome to React</h1>
          </header>
          <p className="App-intro">
           Pulls in post slugs from domain
          </p>

          <ul>
            { this.state.posts.map(post => <li>{post.name} - {post.core_layout.image.name}</li>)}
          </ul>
      </div>
    )
  }
}

编辑 2： 尝试了以下方法：这得到了标题，但又不是我需要的实际核心布局。

import React, { Component } from 'react';
class App extends Component {
  constructor() {
    super();
    this.state = {
      movies: []
    }
  }
componentDidMount() {
    let dataURL = "http://zinsseruk.com/wp-json/wp/v2/posts?per_page=1";
    fetch(dataURL)
      .then(res => res.json())
      .then(res => {
        this.setState({
          movies: res
        })
      })
  }
render() {
    let movies = this.state.movies.map((movie, index) => {
      return <div key={index}>
      <p><strong>Title:</strong> {movie.title.rendered}</p>
      <p><strong>Title:</strong> {movie.core_layout.acf_fc_layout}</p>
      </div>
    });
return (
      <div>
        <h2>Star Wars Movies</h2>
        {movies}
      </div>
    )
  }
}
export default App;

Answer 1

将const posts = res.data; 替换为const posts = res.data.core_layout;。然后你会得到一个类似于你在测试文件中的数组。