TypeError: (...).map 不是函数

Question

我对 javascript 和 react 都是新手，所以这里可能有很多问题。

我有一个界面LiquidityPosition，我试图通过我的LiquidityList 组件将其显示为组件。我将LiquidityList 传递给LiquidityPosition[] 类型的数组。

这是我的 app.tsx：

import React, { useState } from 'react';
import LiquidityList from './components/LiquidityList';
import { LiquidityPosition } from './components/Liquidity'

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

export default App;

流动性列表.tsx：

import React from 'react'
import { LiquidityPosition } from './Liquidity';
import Liquidity from './Liquidity';

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

由于某种原因，posList 不是数组，因为它没有.map 方法？错误信息：

TypeError: posList.map is not a function

Answer 1

提供给组件的参数是一个对象，其每个属性都对应一个由父级传递下来的prop。比如传下来

foo={5}

导致组件的参数等价于

{
  foo: 5
}

组件参数不应该是一个数组 - 它应该是一个包含 positions 属性的对象。将单个道具从对象中取出以到达数组。

在父级中：

<LiquidityList {...{positions}}/>

或

<LiquidityList positions={positions} />

在孩子中，如果你想将pos作为道具传递下去：

export default function LiquidityList({ positions }: { positions: LiquidityPosition[] }) {
  return positions.map(pos => <Liquidity pos={pos}/>);
}