减速器不渲染 reactJS 中的项目

Question

我有这个减速器，它将返回页面上的所有评论：

case actionTypes.GET_COMMENT:
        return {
            ...state,
            comments: action.comments
        }
    export const getComment = (comments : Object[]) => {
    return {
        type : actionTypes.GET_COMMENT,
        comments
    }
}

这是我在组件中的调用方式

 useEffect(() => {
    const getAllCommentsOnCurrentPostFromBE = (id: Number) => {
        axios.get(`http://localhost:4000/getComment/${id}`)
            .then(res => {
                console.log('--------res,get', res.data);
                dispatch(actions.getComment(res.data))
                console.log('--------posts', posts);
            })
            .catch(err => {
                console.log('--------err', err);
            })
    }
    getAllCommentsOnCurrentPostFromBE(grabIdFromLocation())
},[])

res.data是这样的键值对的集合 {"comment":"123"} 但它没有呈现任何东西，请给点建议？

Answer 1

没有dispatch() function。 下载的数据不会传递给 reducer。 您必须使用redux-thunk才能将异步函数与 redux 一起使用。

我建议在单独的文件中使用操作：

export const fetchDataFromDatabase = () => async (
  disapatch,
  getState,
) => {
  const response = await axios.get();
  disapatch({
    type: TYPE,
    data: response.data,
  });
};

然后导出你的组件export default connect(yourProps,{fetchDataFromDatabase})(YourComponent)

在您的组件中，您可以调用props.fetchDataFromDatabase()