无法使用 setState 更改值

Question

我正在使用 React.js 但我无法实现更改变量 test 的值。

这里是App.js的代码：

function App() {
  const [test, setTest] = useState(false);

  return (
    <div className="App">
      <myNavBar handleTest={(test) => setTest(test)} />
      <div>
          {test ? <Test/> : null}
      </div>
    </div>
  );
}

export default App;

和myNavBar.js的代码：

const myNavBar = (props) => {


    const handleTest = (value) => {
        props.handleTest(value);
    }
    return (
        <>
            <Navbar bg="white">
            <Navbar.Brand>Test</Navbar.Brand>
            <Nav>
              <Nav.Link href="/" onSelect={() => {handleTest(false)}}>Home</Nav.Link>
              <Nav.Link href="/test" onSelect={() => {handleTest(true)}}>Test</Nav.Link>
            </Nav>
            </Navbar>
        </>
    )
}

export default myNavBar;

我想我丢失了对 test 值的修改，它总是等于 false

你能帮帮我吗？

非常感谢！

Answer 1

组件必须以大写字母开头。
代码有效，但当您单击 link 时，页面会导航。如果您取消活动，它会按预期工作。

https://codesandbox.io/s/react-playground-forked-yiqre?file=/index.js

简而言之：

<Nav.Link
  href="/"
  onSelect={(_, e) => {
    e.preventDefault();
    handleTest(false);
  }}
>

清理完毕，导航到位：

https://codesandbox.io/s/react-playground-forked-6vch3?file=/index.js

您正在尝试进行 SPA，但它目前不是 SPA。您离开具有更新状态的页面。当新页面加载 (/test) 时，您的状态将重置。

有多种方法可以创建实际的 SPA，您可以在其中为每个页面定义一个组件：您可以使用多种路由解决方案中的任何一种，还有基于挂钩的解决方案等。

此外，代码沙箱中没有 /test 路径，所以它不知道该怎么做。

无法使用 setState 更改值

unable to change the value using setState

reactjs

react-bootstrap