将 useState Hook 传递给 React 上的另一个函数
Passing useState Hook into another function on React
我想在 useState 挂钩中传递一个布尔值,该挂钩在两个函数之间单击时打开和关闭模式。但是,我不断收到此错误消息:Cannot destructure property 'setOpenModal' of 'props' as it is undefined.
Main.js
import React, { useState, useEffect } from "react";
import * as Materials from "../components/Materials"; // <- Material.js
const Main = () => {
const [openModal, setOpenModal] = useState(false); //<- Opens (True) and Closes (False) Modal
const { MaterialContainer } = Materials.MaterialTable(); // <-Calling Function Under MaterialTable
return (
<MaterialContainer
openModal={openModal}
setOpenModal={setOpenModal}
/>
// This is how I am passing in Open/Close useState.
}
Material.js
export const MaterialTable = (props) => {
const { openModal, setOpenModal } = props; // <- Pointed in Error Message.
const openMaterialModal = (item) => {
console.log("Button Clicked");
setOpenModal(true); // <- Where I am passing in a true statement.
};
const MaterialContainer = () => (
<>
<Table>Stuff</Table>
</>
);
return {
MaterialContainer
}
}
提前致谢。
MaterialTable
组件从 React 的角度来看完全是畸形的,尽管有效 JavaScript。它只是一个普通函数,定义了几个常量,然后 returns 什么都没有。 (好吧,在最初的问题中它什么也没返回。现在它 returns 一个对象。)
当你调用那个函数时,你确实没有传递任何东西给它:
const { MaterialContainer } = Materials.MaterialTable();
所以 props
将是 undefined
。
使 MaterialTable
本身成为 React 组件:
export const MaterialTable = (props) => {
// destructure the props passed to the component
const { openModal, setOpenModal } = props;
// a function I assume you plan to use in the JSX below later?
const openMaterialModal = (item) => {
console.log("Button Clicked");
setOpenModal(true);
};
// the rendering of the component
return (
<>
<Table>Stuff</Table>
</>
);
}
然后只需导入并使用该组件,不要尝试从中解构任何内容或手动调用它:
import React, { useState, useEffect } from "react";
// import the component
import { MaterialTable } from "../components/Materials";
const Main = () => {
// use the state hook
const [openModal, setOpenModal] = useState(false);
// render the component, passing props
return (
<MaterialTable
openModal={openModal}
setOpenModal={setOpenModal}
/>
);
}
我想在 useState 挂钩中传递一个布尔值,该挂钩在两个函数之间单击时打开和关闭模式。但是,我不断收到此错误消息:Cannot destructure property 'setOpenModal' of 'props' as it is undefined.
Main.js
import React, { useState, useEffect } from "react";
import * as Materials from "../components/Materials"; // <- Material.js
const Main = () => {
const [openModal, setOpenModal] = useState(false); //<- Opens (True) and Closes (False) Modal
const { MaterialContainer } = Materials.MaterialTable(); // <-Calling Function Under MaterialTable
return (
<MaterialContainer
openModal={openModal}
setOpenModal={setOpenModal}
/>
// This is how I am passing in Open/Close useState.
}
Material.js
export const MaterialTable = (props) => {
const { openModal, setOpenModal } = props; // <- Pointed in Error Message.
const openMaterialModal = (item) => {
console.log("Button Clicked");
setOpenModal(true); // <- Where I am passing in a true statement.
};
const MaterialContainer = () => (
<>
<Table>Stuff</Table>
</>
);
return {
MaterialContainer
}
}
提前致谢。
MaterialTable
组件从 React 的角度来看完全是畸形的,尽管有效 JavaScript。它只是一个普通函数,定义了几个常量,然后 returns 什么都没有。 (好吧,在最初的问题中它什么也没返回。现在它 returns 一个对象。)
当你调用那个函数时,你确实没有传递任何东西给它:
const { MaterialContainer } = Materials.MaterialTable();
所以 props
将是 undefined
。
使 MaterialTable
本身成为 React 组件:
export const MaterialTable = (props) => {
// destructure the props passed to the component
const { openModal, setOpenModal } = props;
// a function I assume you plan to use in the JSX below later?
const openMaterialModal = (item) => {
console.log("Button Clicked");
setOpenModal(true);
};
// the rendering of the component
return (
<>
<Table>Stuff</Table>
</>
);
}
然后只需导入并使用该组件,不要尝试从中解构任何内容或手动调用它:
import React, { useState, useEffect } from "react";
// import the component
import { MaterialTable } from "../components/Materials";
const Main = () => {
// use the state hook
const [openModal, setOpenModal] = useState(false);
// render the component, passing props
return (
<MaterialTable
openModal={openModal}
setOpenModal={setOpenModal}
/>
);
}