.map не является функцией в React production

Question

При локальном запуске моей express реагирующей сборки приложения функция карты работает безупречно, однако всякий раз, когда я переключаюсь на производство. Я получаю сообщение об ошибке, что карта не является функцией.

Появляется ошибка, указывающая на строку «let returnlist». Я включил индекс. js и где происходит ошибка.

import React, { useState, useEffect } from 'react'
import ReactDOM from 'react-dom'
import AddNewPerson from './component/addNew'
import Filter from './component/filter'
import Persons from './component/persons'
import axios from 'axios'



const App = () => {
  const [persons, setPersons] = useState([])
  const [tempPersonList, setTempPersonList] = useState([])
  const [ newName, setNewName ] = useState('')
  const [ newNumber, setNewNumber] = useState('')

  let searchInput = false;
 
useEffect(() => {
 
  axios
    .get('http://localhost:3001/init')
    .then(response => {
      console.log(response.data)
      setPersons(response.data)
      setTempPersonList(response.data)
    })
}, [])

  return (
    <div>

      <Filter persons = {persons} setPersons= {setPersons} tempPersonList = {tempPersonList} 
      searchInput = {searchInput}/>
      <AddNewPerson persons = {persons} setPersons= {setPersons} newName = {newName}
      setNewName = {setNewName} setNewNumber = {setNewNumber} newNumber = {newNumber} />
      <Persons persons = {persons} setPersons = {setPersons} tempPersonList = {tempPersonList} searchInput = {searchInput} />
     
 
    


    
      ...
    </div>
  )
}

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

Ошибка возникает в приведенном ниже коде 'let returnList'.

const Persons = (props) => {

    const persons = props.persons
    const setPersons = props.setPersons
    const tempPersonList = props.tempPersonList
    let searchInput = props.searchInput


  

    let returnList = persons.map((person) => <li className='contact' key = {person.number}>{person.name} : {person.number}  <button onClick={
        () =>{  Axios.delete(`${url}/${person.id}`)
        .then((response) =>{
         
            setPersons(persons.filter(personCheck => personCheck.id !== person.id ))


        })}}>Remove</button></li>)

  let returnSearchList = tempPersonList.map((person) => <li key = {person.number}>{person.name} : {person.number}  <button onClick={
    () =>{  Axios.delete(`${url}/${person.id}`)
    .then((response) =>{
     
        setPersons(persons.filter(personCheck => personCheck.id !== person.id ))


    })}}>Remove</button></li>)



  

    return(
    <div>
        <h2>
            Numbers
        </h2>
    {searchInput ? returnSearchList   : returnList} 

    </div>
    )
}


export default Persons

Большое спасибо

Answer 1

Ваши данные ответа не возвращают массив, это, вероятно, объект. Проверьте на вкладке сети своего браузера, что возвращает ваш вызов AJAX.

Или просто откройте это в своем браузере: http://localhost: 3001 / init

data поле того, что показано, должно быть массивом.