在子进程中调用 useState 钩子 - 状态数据为空答案

【问题标题】：Calling useState hook in child - state data is empty在子进程中调用 useState 钩子 - 状态数据为空
【发布时间】：2020-09-23 08:55:45
【问题描述】：

我正在尝试解决我的（相当简单的）React 应用程序的问题 - 到目前为止，我已经能够通过在需要的地方巧妙地在我的组件周围传递数据来避免使用 Redux 进行全局状态管理。

然而，我遇到了一个主要问题：我有使用道具显示/隐藏的组件。在父级，我使用了一个 useState 钩子：

const [localOrders, setLocalOrders] = useState([]);

我进行 HTTP 调用，然后使用 setLocalOrders 并传入订单数据（然后在页面和子组件上映射/显示）。但是，我也有一个访问localOrders的本地函数：

handleClose: (clearOrder) => {
  setProcessOrderModal({
    ...processOrderModal,
    redacted
  });
  if (clearOrder !== null) {
    setLocalOrders(_.filter(localOrders, ({ order }) => (order.id !== clearOrder)));
  }
},

在子组件中调用此代码时，localOrders 为空（设置为[]）。我不知道如何访问仍然清楚地保存数据的实际状态数据 (localOrders)（就像页面上的订单列表仍然可见）。

【问题讨论】：

您能否指定一个沙箱，以便我们审查您代码的所有方面？
您是否还可以添加代码来显示您如何渲染孩子并将状态和处理程序作为道具传递？这听起来像是处理程序的记忆问题。你在使用任何useCallback 钩子吗？此外，在根据当前状态更新状态时，最好使用状态设置器函数的回调版本，例如setLocalOrders(current => _.filter(current, ...)).
你能不能至少添加 _.filter 函数来看看那里发生了什么

标签： reactjs react-functional-component

【解决方案1】：

试试这个

handleClose: (clearOrder) => {

 if (clearOrder) {
    setLocalOrders(state=> _.filter(state, ({ order }) => (order.id !== clearOrder)));
 
 }

  setProcessOrderModal(state => ({
    ...state,
    redacted
  });
  
 }
},

【讨论】：