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

首先使用数组作为状态的默认值

使用data变量遍历结果

useState挂钩返回2个值，数据和更改该数据的函数

如何在基于React函数的视图中进行api调用并在渲染中填充

1 个答案: