将 useState Hook 传递给 React 上的另一个函数

Question

我想在 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
  }
}

提前致谢。

Answer 1

MaterialTable 组件从 React 的角度来看是完全错误的，尽管是有效的 JavaScript。它只是一个普通函数，定义了几个常量，然后什么也不返回。 （好吧，在最初的问题中它什么也没返回。现在它返回一个对象。）

当你调用那个函数时，你确实没有向它传递任何东西：

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}
        />
    );
}