如何将从数据库接收到的数据作为props传递给 Reactjs 中的另一个组件

IT技术 reactjs function react-router components
2022-07-25 01:59:40

将从数据库接收的数据作为props传递给另一个组件的正确方法是什么？我将作为props发送到另一个customer.id组件。customer.name

如何使用编辑地址功能中的按钮单击发送这些数据？

这是我的代码：

const CustomerAddress = (props) => {
  const history = useHistory()
  useEffect(() => {
    axios({
      method: 'GET',
      url: 'http://localhost:8080/customer/showAddress/',
      headers: {
        Authorization: 'Bearer ' + localStorage.getItem('token'),
      },
    })
      .then((response) => {
        console.log(response.data)
        setData(response.data)
        setisLoaded(true)
      })
      .catch((error) => {
        console.log(error)
      })
  }, [])

  const [data, setData] = useState([])
  const [isloaded, setisLoaded] = useState(false)

  const editAddress = () => {
    history.push('/UpdateAddress')
  }

  let customer = null
  if (isloaded) {
    customer = data.map((customer1) => (
      <div>
        {customer1.id} {customer.name}
        <button
          className="btn btn-primary"
          onClick={() => editAddress(customer1.id)}
        >
          Delete
        </button>
      </div>
    ))
  }

  return <div> {customer} </div>
}
2个回答

您可以使用以下方法将位置状态数据传递给组件history.push：

点击：

<button
  className="btn btn-primary"
  onClick={() => editAddress(customer1.id, customer1.name)}
>
  Delete
</button>

编辑地址：

const editAddress = (customerId, customerName) => {
  history.push('/UpdateAddress', {
    customerId,
    customerName,
  })
}

或者

const editAddress = (customerId, customerName) => {
  history.push({
    pathname: '/UpdateAddress',
    state: {
      customerId,
      customerName,
    },
  })
}

在UpdateAddress组件中，获取数据：

const customerId = this.props.history.location.state?.customerId
const customerName = this.props.history.location.state?.customerName

阅读更多：react-router和历史

您可以将 id 和 name 设置为状态变量，然后传递给组件。

<Customer customerId={customerId} customerName={customerName} />

您可以从子组件的 props 中访问值

如果组件是现有组件的兄弟姐妹，您可以将值发送给父节点，然后发送回所需的节点。

如果您有组件的嵌套结构，请使用 Redux

如果您想在单击按钮时将数据发送给父级，

<Child getData={(data)=>{ 
      // data is the value from the child
      // Statements to execute
}} />

在子项中单击按钮时，您可以将数据传递给父项

this.props.getData(DATA_TO_SEND)
``
其它你可能感兴趣的问题
上一篇如何在 react-typescript 中设置 HOC 中的props类型？ 下一篇React Router V5 在路由中使用上下文变量的最佳方式