Question

我正在慢慢开始使用React钩子，而且我不明白为什么console.log返回我未定义的状态，通常是将一些字符串传递给函数，然后在函数内部设置新状态，并通过props传递它到另一个组件。现在，我希望console.log结果，但是它一直显示给我未定义

const [moduleConfig, setModuleConfig] = React.useState("")

function handleClose(e, moduleConfig) {
    setMenuEl(null)
    setModuleConfig(moduleConfig)
  }

<MenuItem onClick={e => handleClose(e, "light")}>
                  <Link
                    to="/module" 
                    href="/module"
                    > {console.log(moduleConfig)}
                      Set Leds
                  </Link>
                </MenuItem>

编辑：

好吧，也许我还不够清楚，所以我想console.log它，以查看单击元素后它是否改变了值，但最初我希望将其传递给这样的组件：

<Route
            exact
            path="/module"
            render={() => <SetModule classes={classes} moduleConfig={moduleConfig}/>}
          />

Answer 1

没有显示问题的有效代码示例，很难理解您的控制台为何未输出正确的值。

这是一个工作示例，其中控制台输出light。

import React, { useState } from "react";
import ReactDOM from "react-dom";

const App = () => {
  const [moduleConfig, setModuleConfig] = useState("");

  const handleClose = (e, moduleConfig) => {
    setModuleConfig(moduleConfig);
  };

  console.log("moduleConfig:", moduleConfig);

  return <button onClick={e => handleClose(e, "light")}>Click me</button>;
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Codesandbox link

Answer 2

console.log不会产生值。它只是将消息输出到Web控制台。如果要在标记中插入moduleConfig值，请直接执行以下操作：

<MenuItem onClick={e => handleClose(e, "light")}>
  <Link
    to="/module" 
    href="/module"
  > {moduleConfig} Set Leds
  </Link>
</MenuItem>

useState控制台日志返回未定义

2 个答案: