2

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

文件夹结构是这样的：

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

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

4

3 回答 3

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 一起使用。（这是一个更小更具体的状态管理。Small resource）

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

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

于 2021-02-19T09:58:05.353 回答
0

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

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

于 2021-02-19T13:53:20.523 回答
0

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

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;
于 2021-02-25T08:47:15.530 回答