Вывести имя нового персонажа следующим пунктом в списке, а не рендерить по одному. Хотя бы инструкцию как это сделать

Question

import React from "react"

export default function App() {
    const [starWarsData, setStarWarsData] = React.useState({})
    const [count, setCount] = React.useState(1)
    
  
    React.useEffect(function() {
       fetch(`https://swapi.dev/api/people/${count}`)
            .then(res => res.json())
            .then(data => setStarWarsData(data))
    }, [count])
    
    let arr =[]    
    let copy = [...arr, starWarsData]

    const res = copy.map((el)=>{
        return <li key={el}>{el.name}</li>
    })
    
    return (
        <div>         
            <ul>
              {res}
            </ul>  
            <h2>The count is {count}</h2>
            <button onClick={() => setCount(prevCount => prevCount + 1)}>Add</button>
        </div>
    )
}

Answer 1

Для отображения списка персонаженй, необходимо создать данный список.

В вашем примере, при каждом запросе данных по персонажу, новый перезатирает предыдущего.

Вот пример реализации списка персонажей:

export default function App() {
  const [starWarsData, setStarWarsData] = React.useState([]); // Теперь это массив
  const [count, setCount] = React.useState(1);


  React.useEffect(function() {
    fetch(`https://swapi.dev/api/people/${count}`)
      .then(res => res.json())
      .then(data => setStarWarsData((prev) => {
        const newData = [ ...prev ]; // Создаем копию
        newData.push(data); // Пушим нового персонажа
        return newData; // Возвращаем результат в сеттер
      }))
  }, [count]);

  return (
    <div>
      <ul>
        {starWarsData.map(el => (<li key={el.id}>{el.name}</li>))}
      </ul>
      
      <h2>The count is {count}</h2>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>Add</button>
    </div>
  )
}

БЛОГ НА HUSL

Вывести имя нового персонажа следующим пунктом в списке, а не рендерить по одному. Хотя бы инструкцию как это сделать

Ответы (1 шт):