如何在基于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>
    })
  });
}

Here I am making an api call in react using functional component. It is coming the result.

But I am not able to populate result in render. Showing map is not a function error.

Please have a look.

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

First use an array as the default value for your state

Use the data variable to loop over the results

The useState hook returns 2 values, the data and the function to change that data