子組件不是從一個父組件的狀態更改重新渲染，而是從另一個父組件重新渲染？

Question

我有一個子組件PostItem ，它將來自 redux 狀態的 post 對象作為道具：

const PostItem = ({
      post: { _id, text, name, avatar, user, likes}, //from redux state
      //...
   }) => {

   //...

   const handleLike = e => {
      likePost(_id); //ACTION
   };

   return (
      <Fragment>
        <div className='post bg-white vert-m-1 p-1'>
          <div>
            <p className='vert-m-1'>{text}</p>
            <button className='btn' onClick={e => handleLike(e)}>
              <i className='fas fa-thumbs-up'></i> <span>{likes.length}</span>
            </button>
        </div>
      </Fragment>
   );
}

我有一個likePost這樣的動作，它改變了reducer狀態：

    case LIKE_A_POST:
    case UNLIKE_A_POST:
      return {
        ...state,
        posts: state.posts.map(post =>
          post._id === payload.id
            ? {
                ...post,
                likes: payload.likes 
              }
            : post
        ),
        loading: false
      };

據我所知，React 組件會根據 state 或 props 的變化重新渲染。

我從 2 個父組件呈現子組件PostItem ： Posts和Comment 。

如果PostItem是從Posts渲染的，觸發likePost的動作將自動重新渲染組件。 這是有道理的，因為我的 redux 狀態發生了變化，這將導致重新渲染。 此外，由於 redux 狀態作為道具傳遞給PostItem ，因此更改 redux 狀態將更改道具，這也會觸發重新渲染。

但是，當PostItem從Comment呈現時，即使likePost操作仍然更改我的 redux 狀態，觸發likePost也不會導致PostItem重新呈現。 我可以在 redux 開發人員工具中看到狀態實際上已更改，但未觸發重新渲染。 在這種情況下，redux 狀態也作為道具傳遞給PostItem ，但道具的更改不會觸發重新渲染。

為什么PostItem在Posts父組件中重新渲染，而Comment父組件中沒有？ Posts和Comment將 post 對象（包含我的 redux 狀態）作為道具傳遞給PostItem 。

遵循在線建議，我的 reducer 使用擴展運算符來避免使用相同的對象引用。 Posts和Comment使用相同的操作來更改我的 redux 狀態，這意味着狀態在兩種情況下都在發生變化。 Posts和Comment將 redux 狀態作為 prop 傳遞給PostItem ，這意味着在這兩種情況下 props 都會發生變化。

對於完整的可重現代碼，我不確定如何進行，因為它涉及訪問數據庫，需要我的數據庫 URI 以及 JSON 秘密 Web 令牌。 請就如何提供最小的、可重現的示例提供建議。

我的回購鏈接： https : //github.com/boxcarcoder/ExplorersConnect

請在reprex分支中查找以下文件的最小版本：

PostItem、Posts 和 Comment 組件： explorersConnect/client/src/components/posts

操作： explorersConnect/client/src/actions

減速器： explorersConnect/client/src/reducers

Answer 1

關鍵是要意識到雖然likePost改變了一個post的likes ，但是這個post並不是post redux狀態，而是posts數組redux state中的一個post。 這意味着觸發likePost會觸發對posts的更改，它是Posts的道具，但不是Comment的道具。 錯誤的假設是更改Posts將是觸發Comment重新渲染的狀態更改，但Comment的 props 不會更改，因此沒有重新渲染。

由於Comment的 props 是post ，所以likePost action 和 reducer 應該在 redux state 中改變post ，這樣 props 和 state 的改變會觸發Comment的重新渲染。

更改狀態之間存在混淆：更改state.posts與更改state.post ，即使state.posts理論上只是所有state.post的數組。 關鍵是理解組件的 Props 的更改是必要的，而不僅僅是狀態更改。 狀態更改必須直接影響組件的道具。