如何解决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;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。