React - 将从 API 获取的数据作为道具传递给组件

Question

我正在尝试了解和学习如何将数据作为道具传递给其他组件以供使用。我正在尝试构建一个顶级层次结构，其中 API 请求在顶级类中发出，然后将结果传递给子组件以用作道具，然后在状态中使用。

问题是，当我传递结果时，我在子组件中得到 "Object Promise"。 如何访问作为 props 发送给子组件的数据？

您可以在我的 render() 方法中的 App.js 中看到，我创建了类 API 的组件并从 fetchData() 传递结果方法作为组件的参数。

在我的 API.js 类中，我使用了 console.log 来检查结果，但是 我从日志中得到的结果是：

第 5 行： {dataObject: Promise}

第 10 行：未定义

App.js：

import API from './API';

class App extends Component {

  componentDidMount(){
    this.fetchData();
  }


  fetchData(){
      const url = "https://randomuser.me/api/?results=50&nat=us,dk,fr,gb";
      return fetch(url)
          .then(response => response.json())
          .then(parsedJSON => console.log(parsedJSON.results))
          .catch(error => console.log(error));
  }

  render() {
    return (
      <div className="App">
        <API dataObject={this.fetchData()}/>
      </div>
    );
  }
}

export default App;

API.js

import React from 'react';

class API extends React.Component{
    constructor(props){
        console.log(props);
        super(props);
        this.state = {
            dataObj:props.dataObject
        };
        console.log(this.state.dataObject)
    }


    render() {
        return(
            <p>""</p>
        )
    }
}

export default API;

Answer 1

您应该在componentDidMount 而不是render 中获取数据。 每次在 react.js 重新渲染 DOM 时，在 render 中获取数据会导致 API 请求重复。

向 API 端点发出 GET 请求后，首先将数据解析为 javascript 对象，然后在组件内使用 this.setState将结果设置为 state。

从那里，您可以将state 中保存的数据传递给render 函数中的子组件作为道具。

例如：

const App = (props) => 
    <ChildComponent />

class ChildComponent extends React.Component {

    constructor(props){
        super(props);
        this.state = {
            results: []
        }
    }
    componentDidMount(){
        fetch('/api/endpoint')
            .then(res => res.json())
            .then(results => this.setState({results})
    }

    render(){
        return <GrandchildComponent {...this.state} />
    }

}

const GrandchildComponent = (props) => 
    <div>{props.results}</div>

Answer 2

尝试把 App.js 改成这样：

import API from './API';

class App extends Component {

  componentDidMount(){
    this.fetchData();
  }


  fetchData(){
      const url = "https://randomuser.me/api/?results=50&nat=us,dk,fr,gb";
      return fetch(url)
          .then(response => response.json())
          .then(parsedJSON => this.setState({results: parsedJSON.results}))
          .catch(error => console.log(error));
  }

  render() {
    return (
      <div className="App">
        <API dataObject={this.state.results}/>
      </div>
    );
  }
}

export default App;

这确保您获取componentDidMount 中的数据，现在它使用state 存储数据，然后将其传递到您的API 组件中。

Answer 3

如果有人正在使用 Hooks 寻找答案，那么这可能会有所帮助。

App.js

import API from './API';

function App(props) {

  const [result, setResult] = React.useState({});

  // similar to componentDidMount
  React.useEffect(() => {
    this.fetchData();
  }, []);


  fetchData() {
      const url = "https://randomuser.me/api/?results=50&nat=us,dk,fr,gb";
      fetch(url)
          .then(response => setResult(response.json()))
          .catch(error => console.log(error));
  }
  return (
      <div className="App">
        <API dataObject={result}/>
      </div>
    );
}

export default App;

API.js

import React from "react";

function API(props) {
  
  const [result, setResult] = React.useState(props.dataObject);

  React.useEffect(() => {
    setResult(result);
  }, [result]);

  return <p>{result}</p>;
}

export default API;

希望对您有所帮助！如果有任何不正确的地方，请告诉我。