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

Question

[lucky4]

Есть компонент, где хочу вывести данные с существуещего апи.
Пробовал выводить данные так, чисто в консоле:

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

Comments

[McBernar]

Что в response в итоге лежит?

Answer 1

[Евгений Щербаков]

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();
  }, []);