简体繁体 English

我的 `fetch` 请求应该放在我的 React 应用程序的什么位置，而不必在子组件和父组件之间传递数据？

[英]Where should my `fetch` request be placed in my React app without having to pass data between the child and parent component?

原文 2020-08-03 16:20:21 3 2 javascript/ reactjs

I'm working on a project right now, where I have App.jsx , and my other components inputComponent and articleComponent .我现在正在做一个项目，我有App.jsx和我的其他组件inputComponent和articleComponent 。 App.jsx contains both my inputComponent and my articleComponent . App.jsx包含我的inputComponent和我的articleComponent 。 However, I've written the fetch request to be within inputComponent .但是，我已将fetch请求写入inputComponent内。

In this case, my articleComponent relies heavily on the data retrieved from the fetch request, and so I'm thinking, a possible solution would be to move the fetch from inputComponent to articleComponent .在这种情况下，我的articleComponent很大程度上依赖于从fetch请求中检索到的数据，所以我在想，一个可能的解决方案是将fetch从inputComponent移动到articleComponent 。 Another one was to use callbacks to pass data from the child component to the parent component.另一种是使用回调将数据从子组件传递到父组件。 However, based on some answers I've read here and online, it seems that this method of passing data from the child component to the parent is a React anti-pattern as well.但是，根据我在这里和在线阅读的一些答案，这种将数据从子组件传递到父组件的方法似乎也是一种 React 反模式。

I also think that the fetch call ideally shouldn't be on App.jsx , but feel free to correct me if I'm wrong.我还认为fetch调用理想情况下不应该在App.jsx上，但如果我错了请随时纠正我。

Ideally, what I need is for the data retrieved from the fetch call (which comes from user input submission in inputComponent ) to be able to be passed in as props to the ArticleComponent so that I can render the articles with the proper data after fetching it from my server.理想情况下，我需要的是从fetch调用中检索到的数据（来自inputComponent中的用户输入提交）能够作为 props 传递给ArticleComponent ，这样我就可以在获取文章后使用正确的数据呈现文章从我的服务器。 What would be the "React" way of doing it, and also the best way in general?这样做的“React”方式是什么，一般来说也是最好的方式？

2 个解决方案

As @misternobody said, the 'normal' way is to pass data down to children as props and yes, if a parent's state change - it re-renders all of its children (that's the idea behind React).正如@misternobody 所说，“正常”方式是将数据作为道具传递给孩子，是的，如果父母的 state 发生变化 - 它会重新呈现其所有孩子（这就是 React 背后的想法）。

So you would pass your input from inputComponent up to App (with the use of a callback passed as a prop), fetch inside your App , then pass the response down to ArticleComponent因此，您可以将输入从inputComponent传递到App （使用作为道具传递的回调），在您的App中fetch ，然后将响应向下传递到ArticleComponent

If for some reason you want to dodge the rendering of App component in this process, you'd have to use ie.如果在这个过程中因为某些原因想躲避App组件的渲染，那就得用ie了。 Redux and NOT connect App to the store. Redux并且不将App连接到商店。 Then, if you'd properly map store's state and diapatch to props in your 'child' components, it should work as you intended without bothering App .然后，如果您正确地将 map 商店的 state 和 diapatch 分配给“子”组件中的道具，它应该可以按您的预期工作，而不会打扰App 。