Question

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

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

App.js - ＆gt;

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 - ＆gt;

import axios from 'axios';

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

      return user.data;
  }
};

export default helpers;

列表组件 - ＆gt;

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;

输出 - ＆gt;

{currentUser: null}
{currentUser: Promise}
    currentUser: Promise__proto__: Promise[[PromiseStatus]]: "resolved"

Answer 1

好的，你需要改变的是：

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

到

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

WORKING DEMO （结帐控制台）

注意：async await始终返回它刚刚制作的promise 异步函数内的同步行为，但结束于功能它将永远返回承诺。

Answer 2

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

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

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

2 个答案: