reactjs Link onClick set props 在 child 中未定义

Question

我正在尝试在 Link 上设置 onClick 道具。但在 History 组件中它是未定义的。

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>
...
}

parent:

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 (...)
    }

所以我也有一个 Link 在 Item 中有一个 onClick 并且这个正在使用密码道具。但是在历史组件中，密码属性是未定义的。

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

Answer 1

我已经通过更改位置解决了这个问题：

const [password, setPassword] = useState()

给“Store”的父级并将“password”和“setPassword”交给 Store。

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

reactjs Link onClick set props 在 child 中未定义

reactjs Link onClick set props is undefined in child

reactjs

react-router-dom

react-props

use-state