reactjs - 下一个JS : data fetching in child component and pass to parent component

Question

我是 Next.js 的新手，正在尝试做一个电子商务项目。如果子组件 Sort Component 向服务器发出 post 请求以过滤数据并将其作为产品属性传递回 Products 组件，我会卡住。

The folder structure is like this:

<>
 <Sort />
 <Products products={products} />
</>

在 Sort 组件中，我会将过滤器参数发送回服务器。所以我想到的方法是使用Redux，但是我可以使用useSWR hook吗？由于操作是在 Sort 组件上执行的，因此 useSWR Hook 似乎需要在同一组件中同时执行操作和返回数据，对吗？

Answer 1

你的代码是这样的:

<>
 <Sort />
 <Products products={products} />
</>

在这种情况下，您必须在这两个容器中创建一个共享状态，如下所示:

1，你可以使用一个简单的共享状态，比如:

function ContainerOfTwo(props) {
  const [sharedState, setSharedState] = React.useState({});
  return (
    <>
      <Sort setSharedState={setSharedState} sharedState={sharedState} />
      <Products products={products} setSharedState={setSharedState} sharedState={sharedState} />
    </>
  )
}

2，使用 native React contextAPI 可能与 useReducer。 (这是一个更小更具体的状态管理。小resource)

3、使用Redux。 (对于更大，更强大的状态处理程序)

总结:我会首先使用共享状态，如果这不能满足您的要求，请根据您的需要使用 contextAPI 或 redux。如果你做得好，将状态保存到 contextAPI/redux 应该不是一个大问题。