Question

概述：我通过Axios发出GET请求（在这种情况下，它是一个模拟适配器）并让它通过调度更新我的商店。只要路径为＆＃39; / posts / *＆＃39;，模拟适配器就会发回相同的响应。

奇特之处在于它实际上显示了来自模拟API的道具（持续1秒），但是它转到道具是未定义的（即无法读取未定义的属性＆＃39;标题＆＃39;未定义）。

当我记录this.props时，它表明这些道具确实存在。所以我认为没有什么能把它们变回零。

这是axios部分，我目前在midware.js中的apiMiddleware函数中添加

        dispatch({ type: 'GET_POST_AXIOS' });
        let { postID } = action.payload;
        mock.onGet(API_BASE + "/posts/" + postID).reply(200, {
          post:
            { id: 1,
              title: 'Test Title',
              description: 'Test Description',
              media: { medium_url: "http://test.com/test.jpg" }
            }
        });
        axios({
            url: API_BASE + "/posts/" + postID,
            timeout: 20000,
            method: 'get',
            responseType: 'json'
        })
        .then(function(response) {
                dispatch({ type: 'SERVE_POST_AXIOS', response: response.data });
            })

这是减速器部分

case 'SERVE_POST_AXIOS':
  return Object.assign({}, state, { post_axios: response.post })

这是在我的mapDispatchToProps中呈现帖子的组件。 match.params来自react-router的BrowserRouter。

loadFromAxios(cb) {
    console.log("Load from Axios called..");
    dispatch({ type: 'API', payload: { success: 'GET_POST_AXIOS', postID: ownProps.match.params.postID } });
        cb();
    }

Answer 1

我通过修改条件来解决它，这是最初的

this.state.loading ? 
<div>Loading</div>
:
<div>Info here with props</div>

到

this.props.post ?
<div>Info here with props</div>
:
<div>Loading</div>

但我非常希望通过this.state.loading的当前方式来做到这一点。有人有想法吗？

我首先将this.state.loading定义为false，然后这是我的ComponentDidMount

componentDidMount() {
    this.props.loadFromAxios( () => this.setState({ loading: false }) );
}

为什么这不起作用？

React Redux Axios - 可以访问道具然后未定义

1 个答案: