react-redux將道具傳遞給子組件道具

Question

我試圖將道具傳遞給子組件但是孩子總是收到空的。 這是使代碼更清晰的代碼。

當我傳遞給子組件一個狀態時，它工作在這里是工作代碼：

 render() {
   return (
     <div>
       <PostList list={ this.state.posts }></PostList> 
  </div>
  );
}

但在我的情況下，我想從redux狀態傳遞道具

不工作的代碼：

render() {
    return (
      <div>
          <PostList list={ this.props.posts }></PostList>
      </div>
      );
  }
}
function mapStateToProps(state) {
  return {
    posts: state.posts.all,
    postDetail: state.posts.post
  }
}

任何想法為什么PostList在第二種情況下獲得一個空對象，即使this.props.posts在調用組件中實際上不是空的？

謝謝

Answer 1

安裝redux-devtools以查看您的redux狀態實際上是什么樣的。 例如，如果您使用了combineReducers() ，則.posts可能會以reducer的名稱為前綴。

一旦驗證了實際的redux狀態，然后仔細檢查mapStateToProps以確保引用正確的狀態切片。 在你的問題中，我想知道你是否需要調整它，但我不能確定你不知道你的還原狀態是​​什么。

function mapStateToProps(state) {
  return {
    posts: state.posts
  }
}

請確認您要導出的內容。 我假設你的render()方法包含在一個類中？ 如果是這樣，請確保導出connect()的結果。 像這樣的東西：

export default connect(mapStateToProps, mapDispatchToProps)(MyReactClass)

Answer 2

你不應該只是附加到你孩子組件中的商店嗎？ 如果信息是動態的，您可以將信息傳遞到何處。 雖然通過道具傳遞商店價值聽起來像一個壞主意。

至於你的例子 - this.props.posts道具是初始值，重新渲染不是由你的范圍內的道具變化引起的。 更清楚的解釋：如果父母改變兒童成分的道具 - 這會引起重新回復。 如果父母改變它自己的道具，則不會觸發重新渲染。 （this.props不應該變異）

如果你想使一個動作使用狀態 - 將道具傳遞給狀態。 然后對狀態的任何操縱都將導致重新渲染孩子。

<PostList list={ this.state.posts }></PostList>

創建道具后會觸發附加到redux-state，因此在調用子項時它是空的（如上所述）它不會觸發重新渲染。

---

編輯 ：

好吧，我的回答有點混亂。 讓我再嘗試一次。

解：

附加到商店或獲取數據的任何地方，並將此數據傳遞給this.state.posts = data 。 在組件的構造函數中設置默認狀態，如this.state = { posts: [] } （或者需要任何結構）。 在render() ， <PostList list={ this.state.posts }></PostList> child的調用更改為<PostList list={ this.state.posts }></PostList>然后就可以了。

注意：

無論如何，因為你正在使用redux我相信如果你只是附加到你的子組件內的redux商店會更好。