Использование React-Hooks / Axios для извлечения данных и отображения в таблице - PullRequest
Новая
       24

Использование React-Hooks / Axios для извлечения данных и отображения в таблице

0 голосов
/ 05 июля 2019

У меня есть эта настройка React, я определил ловушку с именем ApiTable и у меня есть метод renderTable.То, что я пытаюсь сделать, это получить данные из конечной точки API, https://jsonplaceholder.typicode.com/users и вернуть их в таблицу с соответствующей категорией.

Сейчас они сжимают все столбцы на левой стороне, как видноВот.В настоящее время данные не отображаются и сжимаются в левую сторону.Я почти уверен, что неправильно настроил данные таблицы.

Кроме того, я не уверен, должен ли запрос axios находиться внутри useEffect или нет.

https://imgur.com/a/Up4a56v

const ApiTable = () => {

  const url = 'https://jsonplaceholder.typicode.com/users';

  const [data, setData] = useState([]);

  useEffect(() => {

    setData([data]);

    axios.get(url)

    .then(json => console.log(json))

  }, []);

  const renderTable = () => {

      return data.map((user) => {

        const { name, email, address, company } = user;

        return (
          <div>
           <thead>
               <tr>
                 <th>Name</th>
                 <th>Email</th>
                 <th>Address</th>
                 <th>Company</th>
               </tr>
          </thead>
          <tbody>
          <tr>
              <td>name</td>
              <td>email</td>
              <td>address</td>
              <td>company</td>
          </tr>
          </tbody>
          </div>
        )
      })
    }


      return (
        <div>
            <h1 id='title'>API Table</h1>
            <Table id='users'>
              {renderTable()}
            </Table>
         </div>
      )

};

1 Ответ

1 голос
/ 05 июля 2019

Вы правильно выбираете данные, но неправильно устанавливаете данные.

Кроме того, когда вы выполняете итерацию массива data, вы печатаете table head каждый раз, что неверно, и из вашего data массива address и company являются объектами, поэтому вы не можете напрямую печатать объект.

Тебе нужно сделать это, 

const App = () => {
  const url = 'https://jsonplaceholder.typicode.com/users'

  const [data, setData] = useState([])

  useEffect(() => {
    axios.get(url).then(json => setData(json.data))
  }, [])

  const renderTable = () => {
    return data.map(user => {
      return (
        <tr>
          <td>{user.name}</td>
          <td>{user.email}</td>
          <td>{user.address.street}</td> //only street name shown, if you need to show complete address then you need to iterate over `user.address` object
          <td>{user.company.name}</td> //only company name shown, if you need to show complete company name then you need to iterate over `user.name` object
        </tr>
      )
    })
  }

  return (
    <div>
      <h1 id="title">API Table</h1>
      <table id="users"> //Your Table in post changed to table to make it work
        <thead>
          <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Address</th>
            <th>Company</th>
          </tr>
        </thead>
        <tbody>{renderTable()}</tbody>
      </table>
    </div>
  )
}

Демо

...