将真/假状态从子级传递给父级 - React

Question

我想更改子组件中的真/假状态并将其传递给实际定义状态的父组件。目前，这只会导致错误。

家长：

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

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

孩子：

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 作为 prop 传递。您应该传递setIsSlider。

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

Answer 2

您不必传递状态变量，而是必须传递状态函数，如下所示：

父级

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

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

子级

您必须使用 data. 访问 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。这可以集中您的常用状态，您可以使用 Redux 在任何组件中访问或更新这些状态。