React组件传数组后调用map报is not a function错误如何解决

问题原因 #

• 传参方式错误：App组件中你使用展开运算符{...positions}传入数组，React组件接收的所有参数都会被封装为props对象，展开数组相当于把数组的索引作为props的键逐个传递，而非将整个数组作为单个prop传入。
• 组件参数定义不规范：React函数组件的第一个参数永远是整体的props对象，你直接声明参数为posList: LiquidityPosition[]，本质是把整个props对象赋值给了posList变量，它自然不是数组，没有map方法。

修复方案 #

第一步：修改App.tsx的传参逻辑 #

将展开数组的写法改为传入名为posList的prop，值为你的positions数组：

// App.tsx 修正后代码
import React, { useState } from 'react';
import LiquidityList from './components/LiquidityList';
import { LiquidityPosition } from './components/Liquidity'

function App() {
  let positions: LiquidityPosition[] = [
    {
      time: new Date(2018, 11, 24, 10, 33, 30, 0),
      sizeA: 2,
      sizeB: 1
    }
  ]
  return (
    <>
      <LiquidityList posList={positions}/>
    </>
  )
}

export default App;

第二步：修改LiquidityList的参数类型定义 #

调整组件参数，从props对象中解构出posList，同时声明对应的类型：

// LiquidityList.tsx 修正后代码
import React from 'react'
import { LiquidityPosition } from './Liquidity';
import Liquidity from './Liquidity';

// 可以提前声明Props接口让代码更易维护
interface LiquidityListProps {
  posList: LiquidityPosition[]
}

export default function LiquidityList({ posList }: LiquidityListProps) {
  return (
    <>
      {
        posList.map(pos => <Liquidity {...pos}/>)
      }
    </>
  )
}

内容的提问来源于stack exchange，提问作者facetiousfactorial