如何从 reactjs 中的回调函数渲染数据？

Question

I making requests to my Django backend, the data is a list of information. What I need to do is is render a piece of HTML for each item in the list, this list is retrieved asynchronously. However in the render() where I'm returning some HTML I can't place that in a asynchronous function. I've never had to use this with react:

var allLeads = []
// get a list of all the leads from the Django backend 
 const getAllLeads =  (callback) => {
  const leads = fetch("http://127.0.0.1:8000/api/v1/leads/", {method:'get', headers: {"Content-Type": "application/json"}})
  .then(function(result){
    //console.log("result", await result.text())
    return result.text()
  })
  .then(async function(result){
    // console.log("R2", result)
    allLeads = result.slice()
    // console.log("ALL", allLeads)
    callback(allLeads)
    return await leads
  })

My component class:

class Home extends React.Component {
  state = {
    dataType: "", // store the type of data for the type of operation that should be sent to the backend. For example "create" will have the data for creating data
    data: {},
    displayOptions: false
    } 


  leads = []
  async handleChange(event){
    event.preventDefault()
    this.state.displayOptions = true
  }

  render() {

      getAllLeads(function(data){
        console.log("DATA", data)
        return data
      })


    return (
        <div className="App">
          test

        </div>
      )

  }
}

export default Home;

In getAllLeads I'm successfully logging the data, but I have no idea how I would go about using that data inside my return function. Or how would I even use asynchronous data to set the state to a list for example so I could display the information inside the state?

Answer 1

So there are a couple of problems there, first, to assign a value to the state you have to use this.setState({}) . Since under the hood it will trigger a re-computation of the React Fiber. Another suggestion I would give would be to trigger the API call on componentDidMount() lifecycle hook, you can make him async and then just await the result and call this.setState({ data }) .

class Home extends React.Component {
  state = {
    dataType: "",
    data: {},
    leads: [],
    displayOptions: false
  }

 async componentDidMount() {
   const leads = await getAllLeads((data) => return data);
   this.setState({ leads });
 }

  render() {
    return (
        <div className="App">
          test

        </div>
      )

  }
}

export default Home;

I would also advise to refactor your function to get the leads since returning from inside a then returns nothing. Use async and await instead. Hope this helps!