TypeError：list.map 不是函数

Posted 2023-02-23

【中文标题】TypeError：list.map 不是函数

【英文标题】：TypeError: list.map not a function

【发布时间】：2021-01-11 00:46:37

【问题描述】：

我正在为 React Practice 构建一个应用程序，但在尝试将一组对象存储到本地存储时出现错误。我是 React 的初学者，所以我不确定发生了什么。 我在 IncomeOutputList 组件中收到错误，因为我试图使用数组列出一堆对象。

这是我的代码：

应用组件：

import React,  useState, useReducer  from 'react';
   import BudgetInput from './components/input/BudgetInput';
   import IncomeOutputList from './components/output/IncomeOutputList';
   import IncomeOutput from './components/output/IncomeOutput';

const useSemiPersistentState = (key, initialState) => 
  const [value, setValue] = React.useState(
    localStorage.getItem(key) || initialState
  );
  
  React.useEffect(()=>
    localStorage.setItem(key, JSON.stringify(value));
  , [value, key])

  return [value, setValue];
;

const App = () => 
  const [incomes, setIncomes] = useSemiPersistentState('income',[]);
  const [description, setDescription] = useState('');
  const [type, setType] = useState('+');
  const [value, setValue] = useState('');

  const incomeObj = 
    desc: description,
    budgetType: type,
    incomeValue: value
  

  const handleIncomeObjArray = () => 
    setIncomes(incomes.concat(incomeObj));
    console.log(incomes + "testing");
  

  const handleChange = (event) =>   //this handler is called in the child component BudgetInput
    setDescription(event.target.value);
  

  const handleSelectChange = (event) =>   //this handler is called in the child component BudgetInput
    setType(event.target.value);
  

  const handleValueChange = (event) => 
    setValue(event.target.value);
    console.log(incomeObj)
  

  return (
    <div className="App">

      <div className="top">

        
      </div>

      <div className="bottom">
        <BudgetInput 
          descValue=description
          onDescChange=handleChange
          onSelectChange=handleSelectChange
          type=type
          onBudgetSubmit=handleIncomeObjArray
          budgetValue=value
          onValChange=handleValueChange
        />

        /* <IncomeOutput 
          obj=incomeObj
        /> */

        /* <IncomeOutput 
          desc=description
          type=type
        /> */

        <IncomeOutputList 
          list=incomes
        /> 
      </div>

    </div>
  )
;

IncomeOutputList 组件：

import React from 'react';
import IncomeOutput from './IncomeOutput';


// list will be list of income objects
const IncomeOutputList = ( list ) => 
    return (
        <div>
            list.map(item => <IncomeOutput 
                                id=item.id 
                                value=item.incomeValue 
                                type=item.budgetType 
                                desc=item.desc  
                              />)
        </div>
    )


export default IncomeOutputList;

IncomeOutput 组件：

import React from 'react';
import ValueOutput from './ValueOutput';

const IncomeOutput = ( desc, type,id, value ) => 
    //id = inc-id
        return (
            <>
                <div className="item clearfix" id=id>
                    <div className="item__description">desc</div>
                        <ValueOutput
                            type=type
                            value=value
                        />
                </div>
            </>
        )
    

export default IncomeOutput;

编辑：这是此代码的代码框：https://codesandbox.io/s/busy-shirley-bwhv2?file=/src/App.js:2394-2509

【问题讨论】：

这通常意味着list不是一个数组，所以它不能有map函数。我怀疑该列表从道具接收未定义。也许创建一个代码笔，以便我们可以查明错误。

【参考方案1】：

这是因为您的自定义减速器返回的是字符串而不是数组

试试这个

const useSemiPersistentState = (key, initialState) => 
  const [value, setValue] = React.useState(
    localStorage.getItem(key) ? JSON.parse(localStorage.getItem(key)) : initialState
  );
  
  React.useEffect(()=>
    localStorage.setItem(key, JSON.stringify(value));
  , [value, key])

  return [value, setValue];
;

【讨论】：

这可能是因为localStorage.getItem(key) 第一次可能是null。更改它 io localStorage.getItem(key) && JSON.parse(localStorage.getItem(key)) || initialState

那么 React.useState(localStorage.getItem(key) ? JSON.parse(localStorage.getItem(key)) : initialState)

@Nithish 是的，这似乎现在可以工作了，谢谢！

@alti21 清除你的 localStorage（很确定你有无效的 json）并在 JSON.parse() 周围放置一个 try catch，这样当它失败时你应该使用 localStorage.remoteItem(key) 删除它并使用 initialState 作为默认值