Map Axios 数据在 React 中渲染之外

Question

I am trying to call.map() on data from Axios before passing it into the return statement. The point of this is I want to use Material UI tables, and their pattern is to construct rows, then map the rows value in the return. I cannot figure out what I am doing wrong.

useEffect(() => {
    axios
    .get (url,  {
      auth: {
        username: username,
        password: password
      }
    })
      .then(response => setData (response.data.result));

  }, [])


  function createData(id) {
    return {id}
  }

   const newArray = element => {
       data.map ({
        id: element.Id
       })
    return newArray
   }

    const rows = [
        createData(newArray.id)
    ]

    console.log(data)  //returns the correct array
    console.log(newArray.id)  //returns undefined
    console.log(rows) //returns id:undefined

  return (     
        <div>
          {rows.map(row => (
              <TableCell component="th" scope="row">
                {row.id}
              </TableCell>
          ))}
        </div>  
    )
}

Answer 1

Assuming response.data.result (from your axios request) is an array of objects with an Id property, for example:

[
  { Id: 1, ... },
  { Id: 2, ... }
]

...then perhaps something like this will solve your problem:

function Example(props) {
  const [ rows, setRows ] = useState([])

  useEffect(() => {
    axios
      .get(url, {
        auth: {
          username: username,
          password: password
        }
      })
      .then(response => {
        // Assuming "response.data.result" is an array here
        const data = response.data.result
        const ids = data.map(element => {
          return { id: element.Id }
        })
        setRows(ids)
      });

  }, [])

  return (     
    <div>
      {rows.map(row => (
        <TableCell component="th" scope="row">
          {row.id}
        </TableCell>
      ))}
    </div>  
  )
}