Question

我试图在React Hooks中重新编写一些代码，我想知道，当我在此示例中传递searchData时...现在可以访问searchData和setSearchData吗？我对React Hooks中的状态传递如何工作感到困惑。

import React, { useState, useEffect } from "react";
import SearchBarContainer from "../SearchBar/SearchBarContainer";
import PostContainer from "./PostContainer";



function PostPage(props) {
   const [searchData, setSearchData] = useState([...props.data]);
   const [addLike, setAddLike] = useState([]);

 useEffect(() => {
 setAddLike({ addLike: Array(props.data.length).fill(false) });
  });

return (
  <div>
    <SearchBarContainer data={props.data} searchData={searchData} />

    <div css={parentPostContainer}>
      {searchData.map((dataOnMap, index) => {
        return (
          <PostContainer
            data={dataOnMap}
            addLike={addLike[index]}
            searchData={searchData}
          />
        );
      })}
     </div>
   </div>
 );
}

export default PostPage;

Answer 1

是的，就传承道具而言，React Hooks的用法没有区别。在您提供的代码段中，仅将setSearchData作为对PostContainer的支持。

<PostContainer
  data={dataOnMap}
  addLike={addLike[index]}
  searchData={searchData}
  setSearchData={setSearchData}
/>

Answer 2

是的，你绝对可以。事实上，React 文档可以说是“提升状态”。

如果组件之间存在共享状态，并且您需要将其提升到它们最近的祖先。

一般的概念是 props 向下传递， state 向上传递。

但是，这可能会变得混乱。如果您正在处理一个更大的项目，我建议您使用 Redux。

你可以将 state 作为 props 传递，但是如果你想让子组件改变 state，那么你可以将 setter 从 useState 直接传递给子组件。

这是相同的例子：

<PostContainer
   data={dataOnMap}
   addLike={addLike[index]}
   searchData={searchData}
   setSearchData={setSearchData}
   setAddLike={setAddLike}
/>

Or another solution

const LikeManager = {
  addLike: setAddLike,
  data: {
     //some data
  }  
}

<PostContainer
   data={dataOnMap}
   likeManager: {LikeManager}
/>

我知道这不是问题的一部分，但我建议尽可能为 useState 使用标量值

您可以使用React Hooks将状态传递给子组件吗？

2 个答案: