ReactJS中外部调用组件函数更新state后值未正常渲染的问题

嘿，我明白你遇到的麻烦了——从外部调用组件的abc方法后，this.state.name没在页面上更新。这大概率是**this的指向出问题了**，再加上可能没正确拿到组件实例，导致setState没真正作用到当前组件上。下面给你一步步解决：

第一步：确保正确获取组件实例 #

要从外部调用组件方法，你需要先拿到组件的实例。在React类组件中，我们可以用ref来实现：

// 假设这是调用App组件的父组件
class ParentComponent extends React.Component {
  // 创建一个ref来存储App组件的实例
  appInstanceRef = React.createRef();

  // 外部触发调用的方法
  triggerAbcMethod = () => {
    // 通过ref的current属性拿到App实例，然后调用abc方法
    this.appInstanceRef.current.abc();
  };

  render() {
    return (
      <div>
        {/* 给App组件绑定ref */}
        <App ref={this.appInstanceRef} />
        {/* 点击按钮触发外部调用 */}
        <button onClick={this.triggerAbcMethod}>调用abc更新状态</button>
      </div>
    );
  }
}

第二步：给组件方法绑定正确的this #

你的abc方法如果是普通函数定义的话，默认不会绑定组件实例的this，当外部调用时，this会指向undefined（严格模式下），导致this.setState根本没作用在组件上。有两种简单的绑定方式：

方式一：用箭头函数定义方法（推荐） #

箭头函数会自动绑定当前组件实例的this，不用额外处理：

class App extends React.Component {
  state = { name: "" };

  // 用箭头函数定义abc方法
  abc = () => {
    console.log("ddd");
    this.setState({ name: "asd" });
  };

  render() {
    return <div>ddd{this.state.name}</div>;
  }
}

方式二：在构造函数中手动绑定this #

如果习惯用普通函数定义方法，就在构造函数里把this绑定到组件实例：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: "" };
    // 手动绑定this到组件实例
    this.abc = this.abc.bind(this);
  }

  abc() {
    console.log("ddd");
    this.setState({ name: "asd" });
  }

  render() {
    return <div>ddd{this.state.name}</div>;
  }
}

为什么这样能解决问题？ #

当你用ref拿到组件实例，并且方法正确绑定了this后，调用abc时，this就指向当前的App组件实例，setState就能正确更新组件状态，触发React的重新渲染，页面上的this.state.name自然就会更新啦。

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