как отобразить массив узлов в реакции фронта

Question

Привет, ребята. Я пытаюсь отобразить массив узлов, но у меня возникла ошибка с функцией map. это как когда я устанавливаю apiResponse, он не принимает значение res. json ().

var express = require('express');
var router = express.Router();


    router.get('/', function (req, res, next) {
      var characters = [
        {
          "id": 1,
          "name": "Mickey",
          "username": "Mouse",
          "yearCreation": 1928
        },
        {
          "id": 2,
          "name": "Donald",
          "username": 'Duck',
          "yearCreation": 1934
        }
      ];
      var characterList = characters.reduce(function (characterList, character) {
        characterList.push(character)
        return characterList;
      }, [])

      res.render('map', {
        characterList: JSON.stringify(characterList),
      });

      res.send(characterList);
    });


    module.exports = router;

На фронте реакции это:

import React, {Fragment, useEffect, useState } from 'react'
import Loader from '../Loader'
import axios from 'axios'


const SearchDisney = () => {


  const [inputs, setInputs] = useState('');
  const [btn, setBtn] = useState(false);
  const [apiResponse, setApiResponse] = useState([]);

  const callAPI = () => {
    fetch("http://localhost:9000/disneyCharacter")
    .then(res => res.json())
    .then(res => console.log(res))
    .then(res => setApiResponse(res))
}




  useEffect(() => {

    callAPI();

    if (inputs.length > 2) {
      setBtn(true)
    } else if (btn) {
      setBtn(false)
    }

  }, [inputs, btn])

  const handleChange = (event) => {
    setInputs(event.target.value);

  }
  return (

    <div className="search-container">
      <h1>Personnage Infos</h1>
      <form className='search-character-form'>
        <input
          name ="search"
          type="text"
          placeholder="Chercher un personnage"
          value={inputs}
          onChange={handleChange}
        />
        {btn ? <button>Confirmer</button> : <button disabled>Confirmer</button> }
      </form>
        <p style={{color: 'white'}}>
          {apiResponse.map(character => (<p>{character.name}</p>))}
        </p>
    </div>
  )
}


export default SearchDisney

Но я получил это error: TypeError: Невозможно прочитать свойство 'map' из неопределенного. Как я могу использовать карту для отображения моего массива? Почему это сказало мне, что apiResponse не определен? Спасибо

Answer 1

Я думаю, что проблема в console.log:

const callAPI = () => {
    fetch("http://localhost:9000/disneyCharacter")
    .then(res => res.json())
    .then(res => console.log(res)) // <---- HERE!!
    .then(res => setApiResponse(res))
}

console.log ничего не возвращает, поэтому следующее .then получает неопределенное значение.

Если вы обновите ваш код следующим образом:

const callAPI = () => {
    fetch("http://localhost:9000/disneyCharacter")
    .then(res => res.json())
    .then(res => {console.log(res); return Promise.resolve(res); })
    .then(res => setApiResponse(res))
}

Возвращая res, ваш код должен работать, вы также можете просто удалить эту строку, и она также должна работать.

const callAPI = () => {
    fetch("http://localhost:9000/disneyCharacter")
    .then(res => res.json())
    .then(res => setApiResponse(res))
}