useState not rendering data even when api response is showing in console

Question

*This is how i make the api request and get the response i only uploaded small parts to keep the question simple

const Invoices = ()=> {

  const [invoices,setInvoices] = useState([]);

  useEffect(()=>{
    getInvoices();
  },[])

  const getInvoices = async () =>{
    try{
    await axios.get("http://localhost:8000/api/invoices").then((response)=>{
      console.log(response.data)
      const res = response.data
      setInvoices(res);
      console.log("length",invoices.length);
    })
  }catch(err){
    console.error(err);
  }
  }

*and here is how i try to display it

 <tbody>
            {invoices.map((invoice,index) => {
              return(                  
                <tr key={index}>                  
                  <td>{invoice.N_FAC}</td>
                  <td>{invoice.CODE_CLI}</td>
                  <td>{invoice.CODE_WAREH}</td>
                  <td></td>
                  <td></td>
                  <td><input type="date"onChange={setD}></input></td>
                  <td><a href="#" onClick={() => hanldeClick(invoice)}>Edit</a></td>
                </tr>                                      
              )
              })}
      </tbody>

in the console i get back 3 arrays and each one of them containing about ~10000 objects *i am new to react so any help would be appreciated

Would you mind sharing a link to your repo? You can also add me on Discord @jevoncochran. I cannot see what you are doing wrong but I am willing to help you debug. — Jevon Cochran, Jan 17 '22 at 15:14
i think you have an asynchronous function while you also want your useEffect to work at the same time and this can be problematic. https://stackoverflow.com/questions/53332321/react-hook-warnings-for-async-function-in-useeffect-useeffect-function-must-ret — phemieny7, Jan 17 '22 at 15:32
@JevonCochran https://github.com/juxflex/expiry-date-/tree/main/src — Jimmy, Feb 01 '22 at 09:54
@JevonCochran i have another issue , material table doesnt seem to accept nested array state so i had to make a var Array.prototype.concate([],myState) in order to show state data but this particular variable is sometimes returning errors how can i show my state in material table without concatenating? — Jimmy, Feb 01 '22 at 09:58

score 0 · Answer 1 · answered Jan 17 '22 at 15:30

Try wrapping the function containing axios within the useEffect. As axios is fetching data create a loading component to show progress

useEffect(()=>{
    const getInvoices = async () =>{
      try{
        await axios.get("http://localhost:8000/api/invoices").then((response)=>{
          console.log(response.data)
          const res = response.data
          setInvoices(res);
          console.log("length",invoices.length);
        })
      }catch(err){
        console.error(err);
      }
    }
},[])

Still facing the same problem but i noticed that when i write {invoice[0].CODE_WAREH} i get back results and it shows in the table in my app — Jimmy, Jan 18 '22 at 08:39

score 0 · Accepted Answer · answered Jan 18 '22 at 09:47

So it turned out i was receiving arrays inside of arrays this worked for me hope it helps others and thanks all for your help as well

     <tbody>

              {loading && invoices.map((invoice) => (  
                invoice.map((i,index)=>(
                  <tr key={index}>                  
                  <td>{i.N_FAC}</td>
                  <td>{i.CODE_CLI}</td>
                  <td>{i.CODE_WAREH}</td>
                  <td>{i.Y_FAC}</td>
                  <td>{i.N_FAC}</td>
                  <td><input type="date"onChange={setD}></input></td>
                  <td><a href="#" onClick={() => hanldeClick(invoice)}>Edit</a></td>
                </tr>    
                ))))}
               
          </tbody>```

useState not rendering data even when api response is showing in console

2 Answers2