时间戳

首页 > 解决方案 > 如何从 React 中的组件更新状态？

reactjs - 如何从 React 中的组件更新状态？

问题描述

我正在处理“订单列表”页面。

我有一个钩子： const [orders, setOrders] = useState([])

目前发生的情况：

{orders.map((order) => (
  <OrderComponent order={order}/>
))}

这适用于显示数据，但我希望能够从OrderComponent.

假设我们在 OrderComponent 中有一个注释输入：

<input type="text" name="order_notes" value={order.notes}/>

问题是： 如何处理来自子组件的此类更新？

我尝试了什么：

  const handleOrderNotes = ({ value, orderIndex }) => {
    const ordersCopy = [...orders]
    ordersCopy[ordersIndex].notes = value
    setOrders(ordersCopy)
  }

然后我把它传递给OrderComponent了orderIndex：

{orders.map((order, index) => (
  <OrderComponent order={order} orderIndex={index} handleOrderNotes={handleOrderNotes}/>
))}

并将处理程序添加到输入中：

<input
  type="text"
  name="order_notes"
  value={order.notes}
  onChange={(value) => { 
    handleOrderNotes({value, orderIndex})
  }}
/>

它工作得很好。但是在我开始添加越来越多的东西之后，我想在OrderComponent. 我开始怀疑是否有更好的方法来做这些事情？

在开发过程中，我经常遇到以下错误：

错误：超过最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，可能会发生这种情况。React 限制了嵌套更新的数量以防止无限循环。

所以我相信我在这里遗漏了一些重要的东西。

刚刚开始使用 React，所以将学徒任何输入。谢谢 ：）

标签： reactjs

解决方案

我可以想到两种方法来解决这个问题。您必须根据应用程序的组织/设计方式选择适合您的应用程序。

  1. 如果对应用程序使用 redux 或某种状态管理，那么您不需要告诉父组件，但是由于您在子组件本身中有订单索引，您可以简单地在应用商店/状态中更新该订单本身。
  2. 您可能希望使用每个组件包装useMemo并useCallback用于将任何回调传递给这些子组件。即使您为应用程序完成了状态管理，您也应该执行第二步以避免不必要的重新渲染

推荐阅读