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

Question

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

The folder structure is like this:

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

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

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

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

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

Answer 2

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

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

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

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

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

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

Answer 3

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

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;

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

NextJS: data fetching in child component and pass to parent component

reactjs

next.js

swr