Question

我想使用在组件1中搜索的数据（该页面允许您搜索食谱，然后提供带有名称成分和说明的食谱），并在第2页中使用该数据（允许您查看食谱，然后在商店API中搜索成分）

App.js
class App extends Component {
  render() {
    return(
      <Router>
      <div>
        <Route exact path = '/' component = {Search}/>
        <Route exact path = '/shopping/' component = {Store}/>


      </div>
      </Router>
    )
  }
}


export default App;


Class Component 1
    class Search extends Component {
      state = {
        drinks: [],
        userInput: "",
        selectedDrink: null,
        recipeName: "",
        recipeInstructions: "",
        recipeIngredients: ""
      };

Class component 2
    class Store extends Component {
      state = {
        recipe: []
      };

Answer 1

这取决于您的应用程序的大小，但是有两个主要选择：

向上移动状态：您将组件包装到一个组件中（可能已经拥有），并将所需的所有状态设置到该较高的组件中，并通过props将其传递给下一个组件。子组件通过回调向上传递数据并更新父状态。这对于小型应用程序和紧密耦合的数据很有用。
对于大中型应用程序，您想使用状态管理库，例如redux或mobx。这为您提供了一种高性能且独立的方式来存储大量数据，并轻松在不同组件之间共享数据。这种方法具有更多的开销和更大的学习曲线，但是对于大型应用而言是必需的。

希望这会有所帮助。

Answer 2

每个组件都有一个属性。每个反应成分都有一个道具。每当组件的属性或状态发生变化时，render（）函数都会自动运行，并刷新组件本身。

因此，您可以使用道具将一个组件的状态传递给另一个组件。 https://reactjs.org/docs/components-and-props.html

您还可以使用Redux跨组件全局管理状态 https://react-redux.js.org/

如何使用一页上的状态和数据并在另一页上使用它

2 个答案: