在 React、类组件中更新状态主体时遇到问题

Question

I haven't worked with react in a while and I'm having some trouble giving the tableData's body property the result of the fetched data. The fetched data is simply an object that contains the fetched values of the tableData's selectors. How can I do this?

const fetchData = async () => {
  const result = await authAxios.get(apiUrl);
  return result.data.data;
};

class Index extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tableData: {
        header: [
          {
            name: "Account Type",
            selector: "accountType",
            sortable: true
          },
          {
            name: "Email",
            selector: "email",
            sortable: true
          },
          {
            name: "ID",
            selector: "id",
            sortable: true
          },
          {
            name: "Phone Number",
            selector: "phoneNumber",
            sortable: true
          },
          {
            name: "Username",
            selector: "userName",
            sortable: true
          }
        ],

        body: []
      }
    };
  }

  componentDidMount() {
    setTimeout(function () {
      index();
    }, 800);
  }
  render(){
  ...
  }
  }

Answer 1

You could simply update the state by copying over all the previous values to be as it is and updating only the body property. One way to accomplish this would be to use the spread operator ... .
You could fetch the result and update the state in your componentDidMount .

async componentDidMount() {
    setTimeout(function () {
      index();
    }, 800);

   const res = await fetchData()
   var stateProperty = {...this.state.tableData}
   stateProperty.body = [res]; //Your object would then be stored in body as [{...}]
   this.setState({tableData:someProperty},()=>console.log(this.state.tableData)) //Second argument is a callback to verify if the state has been updated or not, have put up there just to verify, you are free to remove it.
  }

So, we're basically copying over the entire state of tableData to stateProperty then mutating the body property to store the result from fetch , you might be tempted to mutate the state directly cutting the copying part, but that would not give you the desired results, because you are not supposed to mutate the state directly mainly because they are immutable in nature, and also mutating the state directly would trigger no re-renders which would then contradict the whole concept of React. Hence, we are making the necessary changes to the copied over variable then assigning that variable to the state altogether.