Question

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

错误：对象作为 React 子对象无效（找到：对象带有键 {title、episode_id、open_crawl、director、producer、release_date、characters、planets、starships、车辆、物种、created、edited、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>
))

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

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

使用反应 useEffect 获取问题

3 个答案: