NextJS：在子组件中获取数据并传递给父组件

问题描述

我是 Next.js 的新手，正在尝试制作一个电子商务项目。如果子组件 Sort 组件向服务器发送发布请求以过滤数据并将其作为产品道具传递回 Products 组件，我会陷入困境。

文件夹结构是这样的：

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

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

解决方法

你的代码是这样的：

<>
 <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、使用原生 React contextAPI 可能与 useReducer 一起使用。 （这是一个更小更具体的状态管理。小resource）

3、使用 Redux。 （对于更大、更强大的状态处理程序）

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

,

最简单的解决方案，虽然从长远来看可能不是最好的，这取决于这些子组件之间交互的复杂程度，是管理状态并传递状态和挂钩以将状态设置给这些子组件。

function ParentComponent(props) {
  const initialState = {};
  const [ sortedData,setSortedData ] = React.useState(initialState);

  return(
    <>
      <Sort setSortedData={setSortedData} />
      <Products sortedData={sortedData} />
    </>
  )
}

注意：由于 Products 组件依赖于要更新的​​ sortedData，您可能希望在等待 Sort 中的异步获取时为其渲染设置条件。

同样，如果还有任何超出此范围的复杂性，那么您可能需要使用 Redux 或 React 的 ContextAPI 来管理状态。例如，如果 sortedData 用于 Sort 或 Products 的任何子组件，那么您需要使用 Redux 或 ContextAPI 进行管理，这样您就不会将其传递给子组件。

您可以在此处阅读有关 useContext 挂钩的更多信息：useContext

,

您可以使用从父组件到子组件的回调方法，并在父组件中设置状态值并将此值传递给其他子组件。

class Parent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            products: []
        };
    }
    callBackMethod = (products) => {
        this.setState({products})
    }
    render() {
        const { products } = this.state;
        return (
            <>
                <Sort callBackMethod={this.callBackMethod}/>
                <Products products={products} />
            </>
        );
    }
}

export default Parent;