@lucky4

Как отобразить данные с api backenda?

Есть компонент, где хочу вывести данные с существуещего апи.
Пробовал выводить данные так, чисто в консоле:
useEffect(() => {
    fetch('https://xxx')
    .then(response => response.json())
    .then(data => console.log(data))
  }, [])


Ну и решил уже что бы эти данные уже были выведенны в li-элементах. НО! К сожалению, ничего не получилось, ничего не выводит.
export default function ListItems() {
  const [users, setUsers] = useState(null)

  const URL = 'xxx'

  // const fetchData = async () => {
  //   const response = await axios.get(URL)
  //   setUsers(response.data)
  // }

  useEffect(() => async () => {
    const response = await axios.get(URL)
    setUsers(response.users)
  })

  return (
    <ul className="list">
      {
        users && users.map(user => {
          return (
            <li className="item" key={ user.id }>
              <img className="item__photo" src={ user.photo } alt="user-1"/>

              <div className="item__name">
                <h3 className="subtitle">{user.name}</h3>
              </div>

              <div className="item__description">
                <h3 className="description">{user.position}</h3>
                <h3 className="description">{user.email}</h3>
                <h3 className="description">{user.phone}</h3>
              </div>
            </li>
          )
        })
      }
    </ul>
  )
}
  • Вопрос задан
  • 44 просмотра
Решения вопроса 1
Simply1993
@Simply1993
Frontend developer
useEffect(() => async () => {
    const response = await axios.get(URL)
    setUsers(response.users)
  })

Вы возвращаете функцию, а не используете её.
Нужно что-то похожее на это:
useEffect(() => {
    const fetchData = async () => {
      const response = await axios.get(URL);
      setUsers(response.users);
    };

    fetchData();
  }, []);
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
21 сент. 2020, в 00:07
10000 руб./за проект
20 сент. 2020, в 23:49
10000 руб./за проект
20 сент. 2020, в 23:44
20000 руб./за проект