Reactjs 通过道具传递的useState函数不改变值(在React路由器中)

Reactjs 通过道具传递的useState函数不改变值(在React路由器中),reactjs,react-router,use-state,Reactjs,React Router,Use State,我的问题是,我需要更改父组件中的useState值,而不是子组件。但是子组件是路由,所以我像这样传递它们 const NurseInterface = () => { const [wristbandID, setWristbandID] = useState(1); ... <Switch> <Route exact path={`${path}/default-view`}

我的问题是,我需要更改父组件中的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>
。。。 }

路线内部是NurseDefaultView,它将状态传递给腕带:

const NurseDefaultView = ({ setWristbandID }) => {
...
{wristbands ? <Wristbands wristbands={wristbands} setWristbandID={setWristbandID}/> : null}
}
然后腕带通过地图将状态传递给腕带卡

    //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>
腕带卡看起来是这样的:

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>
    )
  }
但它不起作用。ive控制台记录了在路线内部顶层设置的it值,以及该值。但在父母身上,它不起作用

有人在react router中有这样的例子吗?我没有看到任何不幸的事

这让我觉得也许Routes不能将钩子作为道具来处理,我需要为此实现Redux,但我希望可能有地方出了问题?因为这是我唯一需要这种东西的情况


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

您可以与一起使用来更新嵌套子组件setWristbandId中的父级状态腕带id。

请包含调用setWristbandId的代码,否则我们无法帮助您调试。我深表歉意。目前处于保密协议下,所以我必须小心我发布的内容。但我发布了代码的简化版本,其中包含我使用setWristbandID的部分。你介意看一看吗?哦,我明白了,太好了,看起来有点像Redux。所以,当涉及到反应路由器时,您是否会重新使用此命令而不是尝试通过道具传递useState?感谢您在组件链中钻取设置状态,它可能更易于维护和使用。