从 React 中的函数更新状态

Question

I have a class component for my App. When the component is mounted I need to run a function getOrder to check with our database if such order exists. If it is found, I need to update the state with the data from the order.

Function getOrder is used in several places, so I would like to move it to a separate file.

Here is what I have now:

class App extends React.Component {
  state = {
    data: {}
  }

  getOrder = async () => {
    axios.post('', {})
    .then(response => {
      console.log(response);
      if (response.data.result === true) {
        let result = JSON.parse(response.data.data);
        this.setState({data: result});
      } else {
        alert("Order is not found");
      }
    })
    .catch(error => console.log(error));
  };

  async componentDidMount() {
    await this.getOrder()
  }

  render() {
    return (</>);
  }
}

I would like to move function getOrder outside the component like this:

const getOrder = async () => {
  axios.post('', {})
  .then(response => {
    console.log(response);
    if (response.data.result === true) {
      let result = JSON.parse(response.data.data);
      this.setState({data: result});
    } else {
      alert("Order is not found");
    }
  })
  .catch(error => console.log(error));
};

class App extends React.Component {
  state = {
    data: {}
  }

  async componentDidMount() {
    await getOrder()
  }

  render() {
    return (</>);
  }
}

How can I update the state of the App from the function getOrder in this case?

Answer 1

The short answer is: don't update state from outside a component. That leads to tight coupling that makes it hard to extend, refactor and test your components.

---

To refactor this you need to think about which parts of your code are related to fetching order data, and which are related to rendering the outcome. Try not to let transport-related details (HTTP statuses, body parsing, etc.) leak out into your components, for example, or display things to the user from your services.

Also I would generally avoid mixing async / await syntax with .then / .catch - at least within each function you should stick to one or the other.

Here's one way to rearrange it, where getOrder returns a promise that either resolves with the parsed data, or rejects with an error message:

const getOrder = async () => {
  const response = await axios.post('', {});
  if (response.data.result) {
    return JSON.parse(response.data.data);
  }
  throw new Error("Order is not found");
};

Now the component only deals with displaying that data, or the error:

class App extends React.Component {
  state = {
    data: {}
  }

  async componentDidMount() {
    try {
      const data = await getOrder();
      this.setState({ data });
    } catch(err) {
      alert(err);
    }
  }

  render() {
    return (</>);
  }
}

Answer 2

You could just return the promise, from axios.post() And then use the promise to update the state within the component.

const getOrder = () => {
   return axios.post('', {})
};

class App extends React.Component {
   state = {
   data: {}
}

async componentDidMount() {
let orderPromise = await getOrder()

orderPromise.then(response => {
console.log(response);
if (response.data.result === true) {
  let result = JSON.parse(response.data.data);
  this.setState({data: result});
} else {
  alert("Order is not found");
}
})
.catch(error => console.log(error));

}

render() {
 return (</>);
}
}

Answer 3

As all refactors: you pass in everything you need as function arguments.

So in this case, you pass a reference to the component as a function argument so you can call everything that used to be this.[...] as component.[...] instead. Also, because you've moved this function into global/module scope, don't use a const blah = arrow function : there is no this that needs (or can , even) be preserved. Instead, use a normal function getOrder(component, ...) { ...} and then call component.setState(...) in that function once you have the relevant data.

Finally, I would also recommend renaming the function: getOrder doesn't tell anyone what this function does, and as it's no longer contextual to a specific component, it probably should be self-explanatory in its name.