Question

我有一个操作调度程序，可以直接从API服务器上发布博客帖子中的评论，然后发送操作。

export function fetchPostComments(postID) {
 return (dispatch) => {
    fetch(`${url}/posts/${postID}/comments`, { method: 'GET', headers})
    .then((response) => response.json())
    .then((comments) => {console.log("action ", comments); dispatch(getPostComments(comments))})
    .catch((error)=>{console.log('fetch comments error',error)});          
};}

我console.log如上所示，它提供了我正在寻找的结果，如下所示。

以下是我发送操作的方式。

export function getPostComments (comments) {
 return {
  type: GET_POST_COMMENTS,
  comments
 }
}

现在这是我的 reducer ：

function comments (state = {}, action) {
 switch (action.type) {
  case GET_POST_COMMENTS:
      console.log("Reducer comments ", action.comments);
      return action.comments;
  default :
      return state
 }
}

如果您再次观察，我会使用console.log确认结果，然后再次获得我想要的正确结果，如下所示：

现在，在我的一个组件中，我显示了博客文章信息和查看评论的链接。用户单击视图注释后，将触发调用操作调度程序。

 <div className="row">
     <a onClick={this.handleFetchComments} href=""><span className="float-date"><strong style={{fontWeight:'bold'}}>View Comments</strong></span></a>
 </div>
 <div>
      <div>
           <span>Count :  { this.state.comments.length }</span>
      </div>
      <textarea placeholder="Add your comments here"></textarea>
      <input type="submit" value="+Add comment" />        
 </div>

这是获取评论的处理程序：

 handleFetchComments = (e) => {
    e.preventDefault();
    const comments = this.props.getAllComments(this.props.postID);
    console.log("Comments fetch ", comments);
    setInterval(this.loadComments(comments),1000);
 }

 loadComments(comm) {
    console.log("Before ", this.state.comments);
    this.setState(()=>({comments:comm}));
    console.log("After ", this.state.comments);
 }

我只是为了检查结果而放了一些console.log，这是我得到的结果，这是错误的，并且刚刚与reducer产生的结果不兼容。它给出了一个来自调度操作的未定义和空结果，如下面的结果所示：

与此同时，我的Redux 开发工具每次点击查看评论链接时，都会显示我想要的正确数据并触发调度操作，如下所示。

这是我Component上的州，其中包含指向查看评论的链接：

state = {
    post: [],
    hasClickComments : false,
    comments: []
}

这是我mapStateToProps中的App.js：

function mapStateToProps ({posts, comments, categories}) {  
 return {
  posts: posts,
  comments: comments,
  categories: categories,
 }
}

这是我的mapDispatchToProps：

function mapDispatchToProps (dispatch) {
 return {
  getAllComments: (postID) => dispatch(fetchPostComments(postID)),
 }
}

我还有其他行动，我发送mapDispatchtoProps并且它到目前为止都在工作，除了这个。

我是React和Redux的新手，我正在寻找这个近两天的解决方案，但无法理解。什么可能出错？

Answer 1

你混合了React Component的State和props。State And Props

在mapStateToProps之后，所有数据都成为组件的道具。

您应该使用this.props.comments来获取数据！

Answer 2

function comments (state = {}, action) {
 switch (action.type) {
  case GET_POST_COMMENTS:
      console.log("Reducer comments ", action.comments);
      return {
         ...state,
         comments: action.comments;
        }

  default :
      return state
 }
}

Answer 3

如果你的评论数据是在redux中，那么问题就在于你使用mapStateToProps的方式。我建议你在函数中使用调试器，找到你所处的状态。

function mapStateToProps (state) {  
 debugger
//return {
 // posts: posts,
 // comments: comments,
 // categories: categories,
 //}
}

现在查看控制台上的状态数据。然后将数据分配给所需的变量。

减速机结果无法正确反映

3 个答案: