首页 文章

如何将异步状态提取发送到组件？

提问于
浏览 次
1

我目前正在开发一个小应用程序以获得乐趣 . 我遇到了使用axios并将响应作为更新状态返回到我的App组件的问题 .

然后我尝试允许另一个组件使用该状态，但我无法实际访问数据 . 我可以从List组件中调用console.log（props），但我不知道如何输出实际数据，因为我只能输出promise结果 . 我希望能够输出props.currentUser并让它成为googleId（使用谷歌Oauth2.0）..我确信解决方案很简单但是，这是我的代码：

App.js - >

import React from 'react';
import helpers from '../helpers';
import List from './List';

class App extends React.Component{

  state = {
    currentUser: null
  }

  componentDidMount() {
    this.setState(prevState => ({
      currentUser: helpers.fetchUser()
    }));
  }

  render() {
    return (
      <div>
        <List currentUser={this.state.currentUser}/>
      </div>
    );
  }
};

export default App;

helpers.js - >

import axios from 'axios';

var helpers = {
  fetchUser: async () => {
      const user = await axios.get('/api/current_user');

      return user.data;
  }
};

export default helpers;

列表组件 - >

import React from 'react';

const List = (props) => {

  const renderContent = () => {
      console.log(props);
      return <li>{props.currentUser}</li>
  }

  renderContent();

  return (
    <div>
      <h1>Grocery List</h1>
      <ul>

      </ul>
    </div>
  );
}

export default List;

输出 - >

{currentUser: null}
{currentUser: Promise}
    currentUser: Promise__proto__: Promise[[PromiseStatus]]: "resolved"
javascript node.js reactjs

2 回答

  • 1

    好的，你需要改变的是：

    componentDidMount() {
    this.setState(prevState => ({
        currentUser: helpers.fetchUser()
    }));
}

    至

    componentDidMount() {
    helpers.fetchUser().then(data => {
        this.setState(prevState => ({
            currentUser: data
        }));
    })
}

    WORKING DEMO （结帐台）

    注意：async await总是返回它只是在异步函数中生成synchrononus行为的promise，但是结束它将始终返回promise的函数 .

    回复于
  • 1

    因为 fetchUser 是async function，所以它返回一个promise . 因此，在 App 组件中，您必须在该承诺的 .then 内调用 setState ，如下所示：

    componentDidMount() {
    helpers.fetchUser()
      .then(data => {
          this.setState(prevState => ({
              currentUser: data
          }));
      });
}
    回复于

相关问题