Question

我试图理解和学习如何将数据作为道具传递给其他要使用的组件。 Iam试图建立一个顶层层次结构，其中在顶层的类中发出API请求，然后将结果传递给子组件以用作道具，然后进入状态。

问题在于，当我通过结果时，我的子组件中会出现“对象承诺” 。 如何访问作为道具发送给子组件的数据？

您可以在我的 App.js 中的render（）方法中看到，我创建了类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中获取数据。在渲染中获取数据会导致API请求重复，每每次由react.js重新渲染DOM。

向API端点发出GET请求后，首先将数据解析为javascript对象，然后使用<{1}}将结果设置为state 在您的组件中。

您可以在this.setState函数中从此处将state中保存的数据作为道具传递给子元素。

例如：

render

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;

希望有帮助！如果有什么不正确，请告诉我。

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

3 个答案: