async/await 用于使用微调器获取数据

Question

目标

让微调器运行直到数据加载。

我做了什么

我关注了this article 我也尝试了常规的承诺和then，但没有成功。

会发生什么

console.log 立即显示“boom”，因此无需等待数据获取。没有错误。

EventPage.js

constructor (props) {
        super(props);
        this.state = {
            panelView: true,
            loading: true
        }
    }

    async componentDidMount () {
        try {
            await this.props.fetchEvents();
            this.setState({loading: false});
            console.log("BOOM")
        } catch {

        }

    }
render() {
        const {loading} = this.state;
        const {panelView} = this.state;
        if (loading) {
            return <Loader />
        }
        return (
            (Actual page)
        )
    }

eventActionCreator fetchEvents

export const fetchEvents = () => {
    return async dispatch => {
        try {
            const response = await axios.get('http://localhost:3090/events');
            dispatch(setEvent(response.data));
            return response.data;
        } catch (e) {
            return e;
        }
    }
}

控制台只是显示代码正在等待 fetch 执行，它没有。

Answer 1

试试这个方法

state = {
    products: [],
    loading: true,
  }

  async componentDidMount() {
    // try catch just to make sure we had no errors
    try {
      const res = await fetch('http://api');
      // wait for json to be ready
      const data = await res.json();
      this.setState({
        loading: false,
        data,
      });
      // console.log(product.data.attributes)
    } catch (e) {
      console.log(e);
    }
  }



render() {
    const { data, loading } = this.state;
    return (
      <Container>
        <Contents>
          {loading ? 'loading..' : <Products data={data} />}
        </Contents>
      </Container>
    );
  }

Answer 2

我发现了这个问题。问题是我从动作创建者返回数据，而不是基于承诺的动作。

所以，而不是

const response = await axios.get('http://localhost:3090/events');
            dispatch(setEvent(response.data));
            return response.data;

应该是的

return  axios.get('http://localhost:3090/events')
            .then((response) => {
                dispatch(setEvent(response.data));
            });

Issue that helped me resolve it

Answer 3

似乎你把它倒退了......你正在将你的状态初始化为true，然后在cdm中将它设置为false......然后你正在检查加载是否为true，如果是这样渲染加载器......当然，它是不是真的，你把它设置为假...

改成这样：

constructor (props) {
        super(props);
        this.state = {
            panelView: true,
            loading: false <- here
        }
    }

    async componentDidMount () {
    this.setState({loading: true}); <- here

        try {
            await this.props.fetchEvents();
            this.setState({loading: false}); <- and here...
            console.log("BOOM")
        } catch {

        }

    }
render() {
        const {loading} = this.state;
        const {panelView} = this.state;
        if (loading) {
            return <Loader />
        }
        return (
            (Actual page)
        )
    }

这是一个现场演示：https://codesandbox.io/s/r0w381qw3p