Question

我正在尝试使用从usestate挂钩接收到的map显示一系列信息。编写map函数时，出现“无法调用类型缺少调用签名的表达式”。错误。如果我创建一个返回相同信息的函数并调用该函数，则不会收到错误消息。

    export default function Portfolio() {
      const [portfolioData, setPortfoloioData] = useState<IProject[] | []>([])

      useEffect(() => {
        const portfolio: IProject[] = getPortfolio()
        setPortfoloioData(portfolio)
      }, [])

//Function to display the map that works.
      const displayBlocks = (portfolioData: IProject[]): JSX.Element[] => {
        return portfolioData.map((item, index) =>
          <ProjectBlock key={index} project={item} index={index} />
        )
      }

      return (
        <div className='text-center pt-3'>
          <h1 className='pb-4'>Portfolio</h1>

//This works without error
          {displayBlocks(portfolioData)} 

//This shows the missing call signature error even though
//it is the same as what is returned by the displayBlocks function.
          {portfolioData.map((item, index) =>
            <ProjectBlock key={index} project={item} index={index} />
          )}
        </div>
      )
    }

我想弄清楚如何在返回部分中使用简单的映射显示信息，而不必调用另一个函数。我在做什么错了？

Answer 1

您的错误是此行

const [portfolioData, setPortfoloioData] = useState<IProject[] | []>([]);

portfolioData成为IProject[] | []的并集类型。在这种情况下，它是无用的并导致错误。类型为IProject[]的任何变量都可以容纳空数组。因此，无需创建类型为IProject的数组和类型为any的数组的并集（不带类型的方括号被认为类型为any）。

要纠正错误，只需

const [portfolioData, setPortfoloioData] = useState<IProject[]>([]);

如果您想深入了解发生这种情况的原因，建议阅读this（最能说明问题）和this。

显示使用Typescript从Usestate挂钩接收到的数组

1 个答案: