javascript - 如何在表td标签中的循环中显示 react 变量值

Question

我使用axios来获取值，现在我想在循环中显示td标签中的值如何执行它。

我的代码是:

let apiUrl = "http://api_url_here";
axios.get(apiUrl, {headers: headers})
  .then((response) => {
    console.log(response.data[0].provider.firstName);
    //console.log(token);[0]
  })

我的td代码是:

<tr>
  <td className="font-weight-medium"> <img className="logo" src={jessica} alt="pam-logo" /> </td>
  <td>jessicajames@gmail.com </td>
  <td>(012)-876789876</td>
  <td>Family Physician</td>
  <td>23145655</td>
  <td>Mountain view,Ave</td>
  <td><Icon icon={editIcon} width="20px"/>&nbsp;&nbsp;<Icon icon={deleteIcon} width="20px"/></td>
</tr>

我需要第一个 td 中的response.data[0].provider.firstName，并且相应地所有内容都相同，并且它应该在循环中以获得下一次迭代。

Answer 1

试试这个。

import React, {useState, useEffect} from 'react'

const myFunction = () => {
  const [ data, setData ] = useState(null)

  const apiUrl = "http://api_url_here"

  useEffect(() => {
    axios.get(apiUrl, {headers: headers})
      .then((response) => {
         setData(response.data)
      })
  }, [])


  return (
    <>
      {
        data && data.map((item, index) => (
          <tr key={index}>
            <td>{item.provider.firstName}</td>
            ...
          </tr>
        ))
      }
    </>
  )
}