ReactJS:具有定义为数组但被视为对象的 Prop 的功能组件

Question

渲染时<MyComponent {...docs} /> ，我保留了以下错误:

TypeError: docs.map is not a function

这是我的渲染方式 <MyComponent />从基于父类的组件:

import * as React from 'react'
import IDoc from '../types/IDoc'

class Doc extends React.Component
{
   public render()
   {
      const docs : IDoc[] = Defs.getDef();
      // Example of map working (not doing anything just for an example)
      docs.map(x => x);

      return (
         <div>
            <MyComponent {...docs} />
         </div>
      )
   }
}

出于某种原因，当我通过 docs 时数组到函数 <MyComponent/>组件，它不被视为数组。我需要在使用 .map() 之前将其转换为数组我宁愿避免:

import * as React from 'react'
import IDoc from '../types/IDoc'

// docs is an array isn't?
function MyComponent(docs : IDoc[] )
{

   if (Array.isArray(docs) === false)
   {
     //Its not seen as an array so falls into this 
      return (
         <div>
            { Object.keys(docs).map((index) => {
               const doc : IDoc = docs[index];
               const name = doc.name;
               return (
                  <div>{name}</div>
               )
               })
            }
         </div>
      )
   }else
   {
      // what I expected to work but it throws the error
      return (
         <div>
            { docs.map((doc) => {
               return (
                  <div>{doc.name}</div>
               )
               })
            }
         </div>
      )
   }
}

我认为我将文档 Prop 定义为 IDocs[]由于方括号，它会被视为一个数组。

上面的解决方法有效，但显然我不想每次使用数组函数时都这样做 map() .我是 React 的新手，所以希望得到任何指点。我使用 create-react-app my-app --scripts-version=react-scripts-ts 以防万一。

Answer 1

当前您是 spreading docs的元素数组进入props的 MyComponent通过做这个:

<MyComponent {...docs} />

考虑修改您的 MyComponent函数使 docs通过它自己的 Prop 访问。这意味着访问 docs通过 props传递给 MyComponent 的对象像这样的功能组件:

/* Add props argument, where docs array is an entry of props */
function MyComponent(props : { docs : IDoc[] }) {
    const { docs } = props;

    /* You can now use docs as before 
    if (Array.isArray(docs) === false)
    */
}

此更改需要在您的 Doc 中进行。组件， MyComponent组件通过传递 docs 呈现通过执行以下操作作为 Prop (而不是将 docs 数组的元素直接传播到 MyComponent 的 Prop 中):

  return (
     <div>
        {/* Don't spread docs, but instead pass docs via docs prop */}
        <MyComponent docs={docs} />
     </div>
  )

希望这可以帮助!