当将函数作为参数传递时，handleChange 不是函数

Question

我有两个 React 组件，我想制作它们，以便在其中一个组件中选择某些内容会导致另一个组件发生变化。

const MainTest = () => {
    const [selectedTable, setSelectedTable] = useState("");

    function handleSelectedTableChange(newTable) {
        setSelectedTable(newTable);
    }

    return (

            <div style={{ display: 'flex', flex: 1 }}>
                <div style={{ flex: 1 , background: 'lightgray', border: '5px solid #FFF', borderRadius: '10px', padding: '10px' }}>
                    <DatabaseInfoPanel handleChange={handleSelectedTableChange} />
                </div>
                <div style={{ flex: 3 }}>
                    <DatabaseContent selectedTable={selectedTable} />
                </div>
            </div>
        </div>
    );
}

在DatabaseInfoPanel组件中：

const DatabaseInfoPanel = (handleChange) => {
   ...

   const handleNodeClick = (event, nodeId) => {

      if (parentDatabase) {
            ...
            handleChange("Test");
        } else {
            ...
        }
   }
}

在DatabaseContent组件中：

const DatabaseContent = (selectedTable) => {
   ...
   return (
      <div>
         <h1>{selectedTable}</h1>
      </div>
   );
};

但是，当我选择将调用 handleChange 函数的内容时，我得到： handleChange 不是一个函数 类型错误：handleChange 不是函数 在handleNodeClick（http://localhost:3000/static/js/bundle.js:1418:7） 在handleClick（http://localhost:3000/static/js/bundle.js:67258:25） 在 HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:89160:18) 在 Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:89204:20) 在invokeGuardedCallback（http://localhost:3000/static/js/bundle.js:89261:35） 在invokeGuardedCallbackAndCatchFirstError处（http://localhost:3000/static/js/bundle.js:89275:29） 在executeDispatch（http://localhost:3000/static/js/bundle.js:93418:7） 在 processDispatchQueueItemsInOrder (http://localhost:3000/static/js/bundle.js:93444:11) 在 processDispatchQueue (http://localhost:3000/static/js/bundle.js:93455:9) 在dispatchEventsForPlugins (http://localhost:3000/static/js/bundle.js:93464:7)

虽然我非常确定handleChange实际上是一个函数。

Answer 1

你愿意尝试这样吗？

const MainTest = () => {
  const [selectedTable, setSelectedTable] = useState("");

  function handleSelectedTableChange(newTable) {
    setSelectedTable(newTable);
  }

  return (
    <div style={{ display: 'flex', flex: 1 }}>
      <div style={{ flex: 1, background: 'lightgray', border: '5px solid #FFF', borderRadius: '10px', padding: '10px' }}>
        <DatabaseInfoPanel handleChange={handleSelectedTableChange} />
      </div>
      <div style={{ flex: 3 }}>
        <DatabaseContent selectedTable={selectedTable} />
      </div>
    </div>
  );
}

const DatabaseInfoPanel = ({ handleChange }) => {
  // ...

  const handleNodeClick = (event, nodeId) => {
    if (parentDatabase) {
      // ...
      handleChange("Test"); // Now this will work correctly
    } else {
      // ...
    }
  }

  // ...
}

const DatabaseContent = ({ selectedTable }) => {
  return (
    <div>
      <h1>{selectedTable}</h1>
    </div>
  );
};