Question

渲染<MyComponent {...docs} />时，出现以下错误：

TypeError：docs.map不是函数

这是我从基于父类的组件渲染<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>
      )
   }
}

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

上述解决方法有效，但是显然我不想每次使用map()之类的数组函数时都这样做。我是React的新手，因此请多多指教。如果有帮助，我会使用 create-react-app my-app --scripts-version = react-scripts-ts 。

Answer 1

当前，您通过执行以下操作将docs数组中的元素props放入MyComponent的{{1}}中：

<MyComponent {...docs} />

请考虑修改MyComponent函数，以便通过其自身的道具访问docs。这意味着通过传递给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组件（而不是散布docs数组的元素通过执行以下操作直接进入MyComponent）的道具中：

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

希望这会有所帮助！

ReactJS：功能组件，其props定义为Array但被视为Object

1 个答案: