javascript - 从子进程中的 Promise.then 触发父进程中的 setState 函数

Question

我正在尝试从 child promise 中的 parent 找到 setState 的解决方案。

父 组件是

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      transition: false
    };
  }

  handleTransition = () => {
    this.setState(state => ({ transition: !state.transition }));
  };

  render() {
    return <Child handleTransition={this.handleTransition} />;
  }
}

其中 this.props.handleTransition 将从 child component 触发，如下

class Child extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  onSubmit = event => {
    firebase
      .doCreateUserWithEmailAndPassword(email, password)
      .then(() => {
        // Trigger this.props.handleTransition here
      })
      ...

其中 this.props.handleTransition 想要通过 onSubmit 的 then 触发

如果您需要更多详细信息，请告诉我？我不想使用库或包来实现此目的，但如果它使生活更轻松，我可能会考虑。 Redux 可能是最好的选择，但除非必要，否则我宁愿不这样做。

注意:this.props.handleTransition(); 完成了这项工作，但 esLint 返回错误 必须使用解构 props 赋值eslint(react/destructuring-assignment ) 我认为这个方法不是正确的方法。

Answer 1

// --- parent.js

import React, { Component, Fragment } from "react";
import { ChildComponent } from './containers/child'

class ParentContainer extends Component {

  handleUpdate = () => {
    // whatever you want to do here
  }

  render(){
    return (
      <Fragment>
        <ChildComponent onUpdate={this.handleUpdate} />
      </Fragment>
    );
  }
}

export default ParentContainer;

// --- child.js

import React, { Component, Fragment } from "react";

export class ChildComponent extends Component {

  this.someAsyncFunction = () => {
    fetch('/just/for/example')
    .then(res => 
        // Do whatever you need here, then hit your function on parent by bubbling the request up the chain
        this.props.onUpdate();
      ) 
  }

  render(){
     return (
      // whatever you want to do with this data
    );
  }
}