这是我的app.js

import React from 'react';
import ReactDOM from 'react-dom';
import Characters from './components/Characters';

const App = () => {
return (
 <div>
 <h1>Star Wars Characters</h1>
 <Characters />
 </div>
 );
 };

 ReactDOM.render(<App />, document.getElementById('root'));

export default App;

这是我的character.js

import React, { useState, useEffect } from 'react';
import styled from 'styled-components';

const CharacterContainer = styled.div`
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
`;

const Characters = () => {
const [characters, setCharacters] = useState([]);

useEffect(() => {
fetch('https://swapi.dev/api/people/')
.then((response) => response.json())
.then((data) => setCharacters(data.results))
.catch((error) => console.error(error));
}, []);

return (
<div>
{characters.map((character, index) => (
<CharacterContainer key={index}>{character.name}</CharacterContainer>))}
</div>
);
};

我试图呈现一个列表拉数据从一个模拟的API。我的函数是假设循环每个字符拉数据时，字符被选中。
我试过很多不同的东西。4小时的尝试不知道。我觉得答案就在我眼前。