使用 React useEffect 获取问题

Question

我在获取数据时遇到这个错误只是为了练习我不想使用JSON.stringfy我认为这不是很好的练习，请详细解决它谢谢

错误：对象作为 React 子项无效（找到：对象，键为 {title，episode_id，opening_crawl，导演，制作人，release_date，角色，行星，飞船、载具、物种、创建、编辑，url}）。如果您打算渲染一组子项，请改用数组。

import { useState, useEffect, Fragment } from 'react';
import './App.css';

function App() {
  const [data, setData] = useState([]);
  useEffect(() => {
    const fetching = async () => {
      const response = await fetch('https://swapi.dev/api/films')
      const { results } = await response.json();
      const transformedData = results.map((el) => {
        return {
          id: el.episode_id,
          title: el.title,
          text: el.opening_crawl,
          date: el.releaseDate
        };
      });
      setData(transformedData);
    }
    fetching();
  })

  const outputedData = data.map((el) => {
    <div>
      <p>{el.id}</p>
      <p>{el.title}</p>
      <p>{el.text}</p>
      <p>{el.date}</p>
    </div>
  })

  return (
    <div className="App">
      {outputedData}
    </div>
  );
}

export default App;


console.log(results)

6) [{…}, {…}, {…}, {…}, {…}, {…}]0: {title: "A New Hope", episode_id: 4......}

Answer 1

   <div className="App">
     {data.results.map((result) => {
       <span>{{result.title}}</span>
    })}
    </div>

Answer 2

您不能显示非 React 元素的数组。你需要做类似

的事情

return (
        <div className="App">
           {data.map(({title, episode_id, ...props}) => 
              <div>
                <span>{title}</span>
                <span>{episode_id}</span>
              </div>
           )}
        </div>
    );

Answer 3

你必须更换

const outputedData = data.map((el) => {
    <div>
      <p>{el.id}</p>
      <p>{el.title}</p>
      <p>{el.text}</p>
      <p>{el.date}</p>
    </div>
})

来自

const outputedData = data.map((el) => (
    <div key={el.id}>
      <p>{el.id}</p>
      <p>{el.title}</p>
      <p>{el.text}</p>
      <p>{el.date}</p>
    </div>
))

目前，您的代码没有return来自map函数的任何东西

请注意在显示 React 元素数组时使用 key 属性

使用 React useEffect 获取问题

fetching problems with react useEffect

asynchronous

fetch

reactjs