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

Posted 2023-02-23

【中文标题】如何将从数据库接收到的数据作为道具传递给 Reactjs 中的另一个组件

【英文标题】：How to pass data received from database as props to another component in Reactjs

【发布时间】：2020-09-25 22:21:15

【问题描述】：

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

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

这是我的代码：

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>

【参考方案1】：

您可以将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)
``

【参考方案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 和 history

【讨论】：

非常感谢，但您能在 this.props.history.location.state 中告诉我吗？.customerId 这“是什么？”用于？

?. 是Optional Chaining。它是 JS 语言的最新成员。 const id = data && data.id 与 const id = data?.id 相同。另外，请参阅this。

@user5474425 还有另一种方法可以使用history.push 将数据发送到其他组件，即使用params，因此您的URL 看起来像/UpdateAddress/data1/data2，您可以从@ 获取这些参数987654338@ 对象。你可以参考这个answer。但是，如果您不想在 URL 中显示数据，则应使用state（以上答案）。