React redux 不更新数据

Question

我正在从 api 获取数据，axios.When 操作已完成且数据未更改。

components/HomeContainter:


    class HomeContainer extends Component {

    static propTypes = {
        posts: PropTypes.object.isRequired
    };


    componentDidMount()
    {
        this.props.fetchPosts();
    }

    render() {
        return (
            <div className="neokudum-HomeContainer">
                <h1 className="HomeContainer-Head">Ana Sayfa</h1>
                <div className="HomeContainer-CreatePost">
                    <PostList posts={this.props.posts}></PostList>
                </div>
            </div>
        );
    }
}

const mapStateToProps = ({ posts }) => {
    return {
        posts
    }
};

const mapDispatchToProps = {
    fetchPosts
}

export default connect(mapStateToProps, mapDispatchToProps)(HomeContainer);

actions/Posts.js:

        export const FETCH_POSTS_PENDING = 'FETCH_POSTS_PENDING';
        export const FETCH_POSTS_FULLFILLED = 'FETCH_POSTS_FULLFILLED';
        export const FETCH_POSTS_ERROR = 'FETCH_POSTS_ERROR';

       export function fetchPosts()
       {
           return dispatch => {
               dispatch({
                   type: 'FETCH_POSTS',
                   payload: axios.get(API_BASE + '/posts/get/1')
                    .then(result => result.data)
            })
        }
    }

reducers/posts.js:

    const initialState = {
        fetching: false,
        posts: [],
        error: {}
    };

    export default (state = initialState, action) => {
        switch (action.type) {
            case FETCH_POSTS_PENDING:
                return {
                    ...state,
                    fetching: true,
                };
            case FETCH_POSTS_FULLFILLED:
                console.log(state)
                return {
                    ...state,
                    fetching: false,
                    posts: action.payload,
                };
            case FETCH_POSTS_ERROR:
                return {
                    ...state,
                    posts: action.payload,
                    fetching: false,
                };

            default:
                return state;
        }
    }

component/postlist.js:

    const PostList = ({ posts }) => {

        const emptyMessage = (
            <p>Görüntülenecek gönderi yok!</p>
        );

        console.log(posts)
        const postList = (
            <div>
                {
                    posts.posts.map(post => post.id)
                }
            </div>
        );

        return (
            <div>
                <SyncLoader color={'#E8B723'} loading={posts.fetching} />
                { posts.length === 0 ? emptyMessage : postList }
            </div>
        );
    }

    PostList.propTypes = {
        posts: PropTypes.shape({
            posts: PropTypes.array.isRequired
        }).isRequired
    };

    export default PostList;

结果：

stuck loader

log

Answer 1

您的逻辑异步运行，这意味着无法保证一段代码在另一段代码开始之前完成运行。

案例：

   export function fetchPosts()
   {
       return dispatch => {
           dispatch({
               type: 'FETCH_POSTS',
               payload: axios.get(API_BASE + '/posts/get/1')
                .then(result => result.data)
        })
    }

可能发生的情况是 action 在 axios 请求实际完成之前 dispatched。操作顺序错误。您实际上并没有使用 result.data，您也没有将它分配给 payload。

由于您正在使用某种 Redux 中间件（可能是 thunk），您可以像这样重新编写代码：

   export function fetchPosts(){
       return (dispatch) => {
           axios.get(API_BASE + '/posts/get/1')
                .then((res) => {
                      dispatch({
                          type: 'FETCH_POSTS',
                          payload: res.data
                      })
                 })
       }
    }

因此 Promise 在调度 action 之前完成。

React redux 不更新数据

React redux not updating data

promise

reactjs

redux

react-redux

react-props