Question

我是 React 的新手。我想要实现的是在父组件中单击按钮并将一些数据从父组件传递给子组件时呈现一个新组件。我能够从父母导航到孩子，但我无法传递数据。下面是我的代码的简化版本。我的父组件 - Posts.js

    const Posts = (props) => {
      const { posts, loading } = props;
      var nameArray = posts.map(function (el) {
        return el.kiosk_name;
      });
      console.log(nameArray);
      if (loading) {
        return <h2>Loading All Kiosks....</h2>;
      }
      return (
        <div>
          <Link to={`/kiosks/addkiosk`}>
            <button className="AddBtn" onClick={nameArray}>ADD</button>
          </Link>
)}

子组件 - AddKiosk.js

export const AddKiosk = (props) => {
  const { nameArray } = props;
  console.log(nameArray);
}

我试图从 onClick 传递 nameArray，但 AddKiosk 的控制台日志显示 - 未定义。请让我知道我哪里出错了。对不起，如果我的问题很微不足道。提前致谢。

Answer 1

我假设您使用的是 react-router-dom，当您点击 ADD 按钮时，它会将您带到 URL /kiosks/addkiosk 并呈现 AddKiosk 组件。

预期：

您想将 nameArray 数据发送到 AddKiosk 组件。

解决方案：

您可以使用 Link 的 to 属性将一些数据作为 位置状态 传递。您可以阅读this related post。

代码

const Posts = (props) => {
  const { posts, loading } = props
  var nameArray = posts.map(function (el) {
    return el.kiosk_name
  })
  console.log(nameArray)

  if (loading) {
    return <h2>Loading All Kiosks....</h2>
  }

  return (
    <div>
      <Link to={{
        pathname: `/kiosks/addkiosk`,
        state: nameArray // HERE, passing data using Link
      }}>
        <button className="AddBtn">
          ADD
        </button>
      </Link>
    </div>
  )
}

export const AddKiosk = (props) => {
  const location = useLocation()
  console.log(location.state) // HERE, it will print data
  return <>i am AddKiosk</>
}

单击按钮时将数据从父组件传递到子组件

1 个答案:

预期：

解决方案：

代码