使用 react useEffect 获取问题

Posted 2023-02-21

【中文标题】使用 react useEffect 获取问题

【英文标题】：fetching problems with react useEffect

【发布时间】：2021-10-07 06:54:33

【问题描述】：

我在获取数据时遇到此错误，我不想使用 JSON.stringfy 我认为这不是一个好的做法，请详细解决它，谢谢

错误：对象作为 React 子对象无效（发现：对象带有键 title, episode_id, opening_crawl, director, producer, release_date, characters, planets, starships, vehicle, species, created, editing, 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......

【问题讨论】：

那你想怎么显示呢？我们无法真正为您设计应用！

对象数组

另外，我建议在你的 useEffect 钩子中添加一个依赖数组，否则你将触发无限获取

完成了，有什么解决办法吗？

您不能只显示带有对象的数组。您不希望它被字符串化，所以您是否希望每个对象中的所有属性都在新行中，您是否希望它在表格中等等。您可以先自己尝试一下，让我们知道您的目标是什么?

【参考方案1】：

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

【参考方案2】：

你必须替换

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

目前，您的代码不会从 map 函数返回任何内容

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

【参考方案3】：

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

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