Question

对于5月4日，我正在尝试用this REST API进行一场小型星球大战React app。我从people URL获取数据，其中有几个嵌套数组，链接到不同的URL，也返回更多JSON。

我需要做的是找到一种在映射人员JSON时从嵌套数组中获取数据的好方法。

所以我的应用HTML最终看起来像

// this would be something like `<p>{ data.name }</p>`
<p>Name: Luke Skywalker</p>
// data data more data

// the `FILMS` array comes from `data.films` which only holds URL's
<div>
  <p>Films</p>
</div>
<div>
  <p>The Empire Strikes Back</p>
  <p>Revenge of the Sith</p>
  // return the rest of movies character was in
</div>

目前，我的想法是将CharData转换为一个类，并在fetch内进行多次componentDidMount调用，并让它设置状态，希望在{{{{}}上生成一个数组1}}对象。但这需要在每部电影中发生，而我想要的只是标题。似乎很多事情都会返回一个值。

App.js

this.state

CharData.js

import React, { Component } from 'react';
import './App.css';

// components
import CharContainer from './comp/charcontainer/CharContainer';

class App extends Component {
  constructor() {
    super();
    this.state = {
      starwarsChars: []
    };
  }
  componentDidMount() {
    // feel free to research what this code is doing.
    // At a high level we are calling an API to fetch some starwars data from the open web.
    // We then take that data and resolve it our state.
    fetch('https://swapi.co/api/people')
      .then(res => {
        return res.json();
      })
      .then(data => {
        this.setState({ starwarsChars: data.results });
      })
      .catch(err => {
        throw new Error(err);
      });
  }
  render() {
    return (
      <div className="App">
        <h1 className="Header">React Wars</h1>

        {/* Char Container */
        (this.state.starwarsChars.length > 0)
          ?
            <CharContainer charData={ this.state.starwarsChars } />
          :
            <h2>Fetching Character Information...</h2>
        }
      </div>
    );
  }
}

export default App;

Answer 1

您可以呈现<p>{film}</p>，而不是呈现<FilmContainer film={film} />，而film是一个您可以使用与App中类似的方式获取的网址。

对于不同类型的细节，您最终可能会拥有大量这些容器。解决重复问题的一种方法是使用Render Props方法。

class FetchContainer extends Component {
  constructor() {
    super();

    this.state = {
      loading: true,
      data: null
    };
  }

  componentDidMount() {
    fetch(this.props.url)
      .then(res => {
        return res.json();
      })
      .then(data => {
        this.setState({
          loading: false, 
          data,
        });
      })
      .catch(err => {
        throw new Error(err);
      });
  }

  render() {
    return this.props.children({
      loading: this.state.loading,
      data: this.state.data
    });
  }
}

以下是如何使用此组件亲自显示电影信息：

{char.films.map(film => (
  <FetchContainer url={film}>
    {({ loading, data }) => loading ? (
      <p>Loading film...</p>
    ) : (
      <p>{data.title}</p>
    )}
  </FetchContainer>
))}

React：从嵌套数组中获取数据

App.js

CharData.js

1 个答案: