Reactjs 通过道具传递的useState函数不改变值(在React路由器中)
我的问题是,我需要更改父组件中的useState值,而不是子组件。但是子组件是路由,所以我像这样传递它们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`}
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?感谢您在组件链中钻取设置状态,它可能更易于维护和使用。