我想更改子組件中的真/假狀態并將其傳遞給實際定義狀態的父組件。現在，這只會導致錯誤。
家長：
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.
uj5u.com熱心網友回復：
你isSlider作為道具傳遞。你應該通過setIsSlider。
請注意，React 中的狀態管理是一個復雜的主題，您可能希望對它的一般完成方式進行一些研究。直接傳遞狀態設定回呼是可行的，但它不能很好地擴展到復雜的應用程式。
uj5u.com熱心網友回復：
而不是傳遞狀態變數，您必須像這樣傳遞狀態函式：
家長
const PostTemplate = ({ data }) => {
const [isSlider, setIsSlider] = useState(false);
return (
<Layout class="page">
<main>
<Views setIsSlider={setIsSlider} {...data} />
</main>
</Layout>
)}
</>
);
};
孩子
您必須使用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>
);
};
uj5u.com熱心網友回復：
修復：更改setIsSlider={isSlider}為setIsSlider={setIsSlider}.
但是，如果您需要跨組件管理多個狀態。我建議使用Redux。這可以集中您常用的狀態，您可以使用 Redux 在任何組件中訪問或更新這些狀態。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/437287.html
標籤：javascript 反应 反应钩子 使用状态
上一篇：如何創建條件處理程式/按鈕