React не отрисовывется компонент в блоке then

Question

Ребята, помогите понять, почему в блоке then промиса не отрисовывается компонент?

function Character(props) {
const [gender, setGender] = React.useState('all'); 
function setMale() {
  setGender('male')
}
function setFemale() {
  setGender('female')
}
    return (
        <>
        <div className="element__planet">  
        <h3 className="element__title">{props.planet.name}</h3>
       <p className="element__text">Климат: {props.planet.climate}</p>
       <p className="element__text">Диаметр планеты: {props.planet.diameter}</p>
       <p className="element__text">Сила тяжести: {props.planet.gravity}</p>
       <p className="element__text">Орбитальный период: {props.planet.orbital_period}</p>
       <p className="element__text">Население: {props.planet.population}</p>
       <p className="element__text">Период вращения: {props.planet.rotation_period}</p>
       <p className="element__text">Вид планеты: {props.planet.terrain}</p>
       </div> 
       <div className="element__planet">   
       <h3 className="element__title">Персонажи</h3>
       </div>
       <div className="element__select">
        <h3 className="element__title">Выберите пол</h3>
        <button className="element__button" type="click" onClick={setMale}>Male</button>
        <button className="element__button" type="click" onClick={setFemale}>Female</button>
        </div>
        <article className="elements">
       {props.characters.map((character) => {
          api.getAllCharacters('https'+character.replace('http', ''))
          .then((character) => {
            return (
              <CharacterRend character={character} />
            )
            })
          .catch((err) => {
            console.log(`упс, возникла ошибка! ${err}}`)});
         })
         }
      </article>
      </>
  ) 
  }
  
  export default Character;

Answer 1

Я впервые вижу что в JSX кто-то пишет запросы к api.

Если хотите чтобы запрос отправился когда компонент рендерится пишите их внутри useEffect в функциональных компонентах.

И кто такой бэкенд написал что для каждого персонажа у вас будет отправляться отдельный запрос к api.Это ОЧЕНЬ ресурсозатратная операция.

К примеру если у вас будет 100 персонажей это 100 запросов. Просто катастрофа!

Советую все отправлять в один запрос и написать вы это должны внутри useEffect как я ранее советовал.

export default function App() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
       .then((response) => response.json())
       .then((json) => setUsers(json));
  }, []);
  return (
    <div className="App">
      {users.map((user) => (
        <>
          <span>{user.name}</span>
          <br />
        </>
      ))}
    </div>
  );
}

Если все же захотите для каждого элемента отправить отдельный запрос (ЧТО НЕ СОВЕТУЕТСЯ)

export default function App() {
  const [users, setUsers] = useState([]);
  const [ids] = useState([1, 2, 3, 4, 5]);

  useEffect(() => {
    ids.forEach((id) => {
      fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
        .then((response) => response.json())
        .then((json) => setUsers((prev) => [...prev, json]));
    });
  }, []);

  return (
    <div className="App">
      {users.map((user) => (
        <>
          <span>{user.name}</span>
          <br />
        </>
      ))}
    </div>
  );
}

БЛОГ НА HUSL

React не отрисовывется компонент в блоке then

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