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：无法读取未定义的属性“ map”：

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：尝试以下操作：这将获得标题，但同样，不是我所需的实际corelayout。

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;。然后，您将获得一个与测试文件中的数组相似的数组。

Answer 2

我认为您需要了解从API收到的JSON结构。 core_layout属性在哪里？在每个post属性中都还是孩子？

因此，在帖子循环中，您可以使用post.core_layout.image.name作为图片名称（例如，以及其他属性）。

如果core_property是所接收数据的根源，则可以像下面这样在状态内加载它：

  state = {
    posts: [],
    coreLayout: {}
  }

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

然后通过使用本地组件状态在代码中使用它：

render() {
  ...
  // For example image name:
  console.log('image name', this.state.coreLayout.image.name)
  ...
}

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

2 个答案: