Как отобразить значения реагирующих переменных в l oop в табличном теге td - PullRequest
Новая
       2

Как отобразить значения реагирующих переменных в l oop в табличном теге td

0 голосов
/ 19 февраля 2020

я использую ax ios, чтобы получить значения, теперь я хочу отобразить значения в теге td в al oop, как его выполнить.

мой код: 

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>

Мне нужен этот response.data [0] .provider.firstName в 1-м т. И соответственно одинаков для всех, и он должен быть в l oop, чтобы получить следующий итерации.

Ответы [ 3 ]

1 голос
/ 19 февраля 2020

попробуйте это. 

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>
        ))
      }
    </>
  )
}
0 голосов
/ 19 февраля 2020

Если response.data - это список с содержимым таблицы, добавьте его к вашему render() методу: 

return response.data.map((item, index) => {
   <tr key={index}>
      <td>{item.foo}</td>
      <td>{item.bar}</td>
      ...
   </tr>
});
0 голосов
/ 19 февраля 2020

Ваш axios вызов обычно должен находиться на этапе инициализации, например, с использованием useEffect или componentDidMount, в зависимости от стиля вашего компонента.

Затем вы устанавливаете данные, используя свой ответ Например, 

setData(response.data);

или 

this.setState({"myData": response.data});

, и при рендеринге вы используете эти данные l oop для генерации строк, что-то вроде: 

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