TypeError: (...).map is not a function

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;

LiquidityList.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

提供给组件的参数是一个 object，它的每个属性都对应于 parent 传递下来的一个 prop。比如往下传

foo={5}

导致组件的参数等同于

{
  foo: 5
}

组件参数不应该是一个数组 - 它应该是一个 object 包含一个 positions 道具。将单个道具从 object 中取出来得到数组。

在parent中：

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

或

<LiquidityList positions={positions} />

在child中，如果要将pos作为prop传下去：

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

TypeError: (...).map is not a function

TypeError: (...).map is not a function

reactjs

react-tsx