reactjs - reactjs Link onClick set props 在子级中未定义

Question

我正在尝试在单击链接上设置道具。但在历史组件中它是未定义的。

export function Item({ id, prePassword, updateList, setPropsPassword }) {
...
<Link onClick={()=>setPropsPassword(password)} to={"/history/"+id} className="btn-open-history float-left btn btn-primary">Geschiedenis</Link>
...
}

家长：

function Store(props) {
  let { id } = props.match.params;
  const [password, setPassword] = useState()
  
  return (
    <>
      <List items={props.items} setPassword={setPassword} selectedId={id}  />
      <AnimatePresence>
        {props.match.path=="/history/:id" && id && <History prePassword={password} id={id} key="item" />}

        {props.match.path=="/list/:id" && id && <Item setPropsPassword={setPassword} updateList={props.updateList} prePassword={password} id={id} key="history" />}

        
      </AnimatePresence>
    </>
  );
}

历史组件：

class History extends React.Component {

    constructor(props) {
        super(props);
    }

    componentDidMount() {
        console.log(this.props)
    }
    componentDidUpdate(){ 
        console.log(this.props)
    }
    render() {
        return (...)
    }

所以我在 Item 中也有一个带有 onClick 的链接，这个链接正在使用密码道具。但是在历史组件中，密码道具是未定义的。

我不明白为什么它在历史组件中未定义

标签： reactjsreact-router-domreact-propsuse-state

Answer 1

我已通过更改以下位置来解决此问题：

const [password, setPassword] = useState()

到“Store”的父级，并将“password”和“setPassword”传递给 Store。

但我仍然不知道为什么它在商店中不起作用。