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

【问题标题】：reactjs Link onClick set props is undefined in childreactjs Link onClick set props 在子级中未定义
【发布时间】：2021-02-12 23:06:00
【问题描述】：

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

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 的链接，这个链接正在使用密码道具。但在历史组件中，密码道具是未定义的。

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

【问题讨论】：

onClick={()=>setPropsPassword(password)} 我看不到password 的定义位置。该变量应该来自哪里？应该是prePassword？
那部分我忘记了，我用axios获取密码。因为我使用 framer-motion，所以我在加载时使用预密码，加载后我执行 axios 调用来获取所有密码数据。该数据被正确检索

标签： reactjs react-router-dom react-props use-state

【解决方案1】：

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

const [password, setPassword] = useState()

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

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

【讨论】：