如何在基於React函數的視圖中進行api調用並在渲染中填充

Question

import React, { useState, useEffect} from 'react';

const App  = () => {
  const [setData] = useState('');

  useEffect(() => {
    fetch('https://jsonplaceholder.com/users/')
    .then(res => res.hson())
    .then(res => {
      setData(res);
    })
  });

  return ({
    setData.map(data => {
      <h1>{data.name}</h1>
    })
  });
}

在這里，我使用功能組件在響應中進行api調用。 結果來了。

但是我無法在渲染中填充結果。 顯示地圖不是功能錯誤。

請看一看。

Answer 1

import React, { useState, useEffect} from 'react';

const App  = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch(`https://jsonplaceholder.com/users/`)
    .then(res => res.json())
    .then(res => {
      setData(res);
    })
  }, []);

  return !!data && data.map(data => <h1>{data.name}</h1>);
}

首先使用數組作為狀態的默認值

使用數據變量遍歷結果

useState掛鈎返回2個值，數據和更改該數據的函數