通过 props 向下传递的 useState 函数不会改变值（在 React-Router 中）

Question

我的问题是我需要从子组件更改父组件中 useState 的值。但是子组件是路由，所以我这样传递它们；

const NurseInterface = () => {
const [wristbandID, setWristbandID] = useState(1);
...
<Switch>
                    <Route
                     exact path={`${path}/default-view`} 
                     render={(props)=> (
                         <NurseDefaultView {...props}  setWristbandID={setWristbandID}/>// Alternative way of Routing Components, allowing you to pass props to it 
                     )}
                    />
...
</Switch>

... }

Route 内部是 NurseDefaultView，它将状态传递给 Wristbands：

const NurseDefaultView = ({ setWristbandID }) => {
...
{wristbands ? <Wristbands wristbands={wristbands} setWristbandID={setWristbandID}/> : null}
}

然后Wristbands通过map()将状态下传给腕带卡片

    //React-Spring
  const transitions = useTransition(wristbands, wristband => wristband.id, {
    from: { opacity: 0, transform:"translate(0px, -50px)" },
    enter: { opacity: 1, transform:"translate(0px, 0px)" },
    leave: { opacity: 0, transform:"translate(0px, -50px)" },
  })
  

    if (wristbands) {
    return (
      <>
         {transitions.map(({item, key, props})=> (
           item ? (
         <WristbandCard key={parseInt(item.id)}
            props={props}
            nurseView={true}
            setWristbandID={setWristbandID} 
            wristband={item}/> ) : null
          ))}
      </>
    )} else return <div>No Wristbands</div>

WristbandCard 看起来是这样的：

const WristbandCard = ({ wristband, setWristbandID, setShowDetail, nurseView, props }) => {
  
 ...
  const handleClick = () => {
    if (nurseView) {
      console.log(wristband.id);
      setWristbandID(wristband.id);
    } else {
      console.log("SetShowDetail")
      setShowDetail(true);
      setWristbandID(wristband.id);
    }  
  }
  
  ...
     if (nurseView) return (
      <Link className="right" to={`patient-cart`}>
        <animated.article style={props} onClick={handleClick} className="card">
          <header>
            {battery(data)}
            <img alt="Wifi Icon by Google Inc (placeholder)" src={Connection}/>
          </header>
            <h1>{wristband.name}</h1>
            <div><img alt="transfer" src={Arrow}/><h3>{description(wristband, nurseView)}</h3></div>
          <footer><img alt="transfer" src={Transfer}/></footer>
        </animated.article>
      </Link>
    ); else return (
      <animated.figure style={props} onClick={handleClick} className={wristband.connected ? "card": "card red"}>
        <header>
          {battery(data)}
          <img alt="Wifi Icon by Google Inc (placeholder)" src={Wifi}/>
        </header>
        <h3>{description(wristband)}</h3>
        <h2>{wristband.name}</h2>
      </animated.figure>
    )
  }

但它不起作用。我的控制台记录了它在路由内顶层设置的值，以及值。但是在父级中，它不起作用。

有没有人有任何在 react-router 中工作的例子？没看到悲催的。

这让我觉得也许 Routes 无法将 Hooks 作为 props 来处理，我需要为此实现 Redux，但我希望我可能哪里出错了？因为这是我唯一需要这样的情况。

如有任何帮助，我将不胜感激。谢谢

Answer 1

您可以使用 context with a context hook 在嵌套子组件 (setWristbandId) 中更新父项的状态（腕带 ID）。

通过 props 向下传递的 useState 函数不会改变值（在 React-Router 中）

useState function passed down through props doesnt change value (In React-Router)

reactjs

react-router

use-state