将 true/false 状态从 child 传递给 parent- React

Question

我想更改 child 组件中的 true/false 状态并将其传递给实际定义状态的 parent 组件。现在，这只会导致错误。

Parent:

const PostTemplate = ({ data }) => {
  const [isSlider, setIsSlider] = useState(false);

  return (
        <Layout class="page">
          <main>
                <Views setIsSlider={isSlider} {...data} />
          </main>
        </Layout>
      )}
    </>
  );
};

Child:

const Views = (data) => {
  return (
      <div
        key="views"
        className="post__gallery views"
      >
        {data.views.edges.map(({ node: view }) => (
          <divy
            onClick={() => setIsSlider(true)}
          >
            <GatsbyImage
              image={view.localFile.childImageSharp.gatsbyImageData}
            />
            <div
              className="post__caption"
              dangerouslySetInnerHTML={{
                __html: view.caption,
              }}
            />
          </div>
        ))}
      </div>
  );
};

现在，结果是：

setIsSlider is not a function.
(In 'setIsSlider(true)', 'setIsSlider' is false)

也许也与来自 React 的 console.log 有关：

Can't perform a React state update on an unmounted component.
This is a no-op, but it indicates a memory leak in your application.
To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

Answer 1

您正在传递 isSlider 作为道具。你应该通过 setIsSlider.

请注意，React 中的状态管理是一个复杂的主题，您可能想对它的一般完成方式进行一些研究。直接传递状态设置回调可行，但它不能很好地扩展到复杂的应用程序。

Answer 2

不是传递状态变量，而是必须像这样传递状态函数：

Parent

const PostTemplate = ({ data }) => {
  const [isSlider, setIsSlider] = useState(false);

  return (
        <Layout class="page">
          <main>
                <Views setIsSlider={setIsSlider} {...data} />
          </main>
        </Layout>
      )}
    </>
  );
};

Child

您必须使用 data.<function_passed_via_props> 来访问 setIsSlider 函数，如下所示：

const Views = (data) => {
  return (
      <div
        key="views"
        className="post__gallery views"
      >
        {data.views.edges.map(({ node: view }) => (
          <divy
            onClick={() => data.setIsSlider(true)}
          >
            <GatsbyImage
              image={view.localFile.childImageSharp.gatsbyImageData}
            />
            <div
              className="post__caption"
              dangerouslySetInnerHTML={{
                __html: view.caption,
              }}
            />
          </div>
        ))}
      </div>
  );
};

Answer 3

修复：将 setIsSlider={isSlider} 更改为 setIsSlider={setIsSlider}。

但是，如果您需要跨组件管理多个状态。我建议使用 Redux。这可以集中您的 common-used 状态，您可以使用 Redux 在任何组件中访问或更新这些状态。

将 true/false 状态从 child 传递给 parent- React

Pass true/false state from a child to the parent- React

javascript

reactjs

react-hooks

use-state