Javascript 如何在td tag表的循环中显示react变量值

我使用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>

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

您的axios调用通常应该处于初始化阶段，例如通过使用useEffect或componentDidMount，具体取决于组件的样式

然后使用您的响应设置数据，例如

setData(response.data); 

或

在渲染中，您使用该数据循环生成行，这些行是沿着以下行的：

const { myData } = this.state;
myData.map((datum, index) => {
   <tr key={index}>
     <td>{datum.provider.firstName}</td>
     ...
   </tr>
});

如果response.data是包含表内容的列表，请将其添加到渲染方法中：

return response.data.mapitem，索引=>{ {item.foo} {item.bar} ... }; 试试这个

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>
        ))
      }
    </>
  )
}

---

您正在为此使用类组件吗？@MuhammadZeeshan yesCan您可以显示响应的值。数据吗？@MuhammadZeeshan其唯一的json对象名为，mail etcNo其不工作，显示数据和索引未定义错误缺少，现已修复

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>
        ))
      }
    </>
  )
}