时间戳

首页 > 解决方案 > 如何在反应前面显示节点数组

javascript - 如何在反应前面显示节点数组

问题描述

嗨，伙计们，我尝试显示节点数组，但 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

但我收到了这个错误：TypeError: Cannot read property 'map' of undefined。我如何使用地图来显示我的数组？为什么说我 apiResponse 未定义？谢谢

标签： javascriptnode.jsjsonreactjsreact-hooks

解决方案

我认为问题出在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没有返回任何东西，因此 next.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))
}

推荐阅读