如何将React组件内的state对象共享给其他React文件的组件

以下是适配你现有代码结构的可直接落地的实现方案，按组件关系场景选择即可： #

方案1：Db为Filler的父组件（直接通过props传递） #

这是成本最低的实现方式，直接在Db组件的render方法中渲染Filler组件，将state中的Data作为props传入即可。

修改后的Db.js代码 #

import React, { Component } from "react";
import axios from "axios";
import Layout from "./Layout";
import Filler from "./Filler"; // 引入Filler组件

class Db extends Component {
  constructor() {
    super();
    this.state = {
      Data: [],
    };
  }

  componentDidMount() {
    axios.get(`https://breakingbadapi.com/api/characters`).then((res) => {
      const data = res.data;
      this.setState({ Data: data });
    });
  }

  render() {
    return (
      <div>
        <h1>DB working</h1>
        {/* 把state中的Data通过props传给Filler */}
        <Filler listData={this.state.Data} />
      </div>
    );
  }
}

export default Db;

修改后的Filler.js代码 #

import React, { Component } from "react";

class Filler extends Component {
  constructor(props) {
    // 必须传入props才能在构造函数中访问传入的参数
    super(props);
  }

  render() {
    // 直接通过this.props.listData获取Db传来的数据
    const { listData } = this.props;
    return (
      <div>
        {/* 示例：渲染数据长度，可根据业务需求修改渲染逻辑 */}
        <p>获取到的角色数量：{listData.length}</p>
      </div>
    );
  }
}

export default Filler;

方案2：两个组件为平级/无直接父子关系（状态提升） #

如果Db和Filler是同级组件，就把共享的Data状态和API请求逻辑提升到它们的共同父组件中，再分别传给两个子组件。
示例共同父组件App.js代码：

import React, { Component } from "react";
import axios from "axios";
import Db from "./Db";
import Filler from "./Filler";

class App extends Component {
  constructor() {
    super();
    this.state = {
      Data: [],
    };
  }

  componentDidMount() {
    axios.get(`https://breakingbadapi.com/api/characters`).then((res) => {
      const data = res.data;
      this.setState({ Data: data });
    });
  }

  render() {
    return (
      <div>
        <Db Data={this.state.Data} />
        <Filler listData={this.state.Data} />
      </div>
    )
  }
}

export default App;

对应的Db组件可以删掉自身的state和API请求逻辑，直接接收props使用即可。 #

方案3：组件层级较深（使用React Context API） #

如果两个组件间隔很多层级，props透传太繁琐，可以用React内置的Context API做全局状态共享，无需引入第三方状态管理库。

内容的提问来源于stack exchange，提问作者ibrahim