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

Question

我正在尝试使用从 usestate 挂钩接收到的地图显示信息数组。在编写 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[]>([]);

如果您想深入了解为什么会发生这种情况，我建议您阅读这个（它最好地描述了问题）和这个.