Question

我有一个组件，我尝试在我的博客应用中显示单个帖子。当我从索引页面来看一切正常。但是当我把帖子的url直接放到那条路径上时（例如/posts/2357），就会出现问题。在我的代码检查器中，在“网络”选项卡上，我可以看到此帖子的数据，但由于某种原因，组件无法更新，用户只能看到无限的“＃34;正在加载......＆＃34;成分

我的组件：

class PostsShow extends Component {
    componentDidMount() {
        if (!this.props.post) {
            const { id } = this.props.match.params;
            this.props.fetchPost(id);
        }
    }

    render() {
        const { post } = this.props;
    // Check if we already have a post
        if (!post) {
            return <Loader />;
        }

        return (
            <div>
                <div className="row m-t-2">
                    <h3>{post.title}</h3>
                    <span className="m-b-2 label label-info">{post.categories}</span>
                    <p>{post.content}</p>
                </div>
            </div>
        );
     }
}

function mapStateToProps({ posts }, ownProps) {
    return { post: posts[ownProps.match.params.id] };
}

export default connect(mapStateToProps, { fetchPost })(PostsShow);

行动：

export function fetchPost(id) {
    const request = axios.get(`${ROOT_URL}/posts/${id}${API_KEY}`);

    return {
        type: FETCH_POST,
        payload: request
    };
}

减速机：

export default function(state = {}, action) {
    switch (action.type) {
    case FETCH_POST:
        return { ...state, [action.payload.data]: action.payload.data  };
    default:
        return state;
    }
}

Answer 1

你的减速机看起来有些不对劲。您将州的对象键设置为[action.payload.data]，并将此对象的值设置为[action.payload.data]。您不能将密钥值设置为[action.payload.data.id]吗？

为什么组件在接收数据时不会更新？ ReactJS

1 个答案: