reactjs - 使用 Typescript 显示从 Usestate 钩子(Hook)接收到的数组

Question

我正在尝试使用从 usestate 钩子(Hook)接收到的 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>
      )
    }

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

Answer 1

你的错误是这一行

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

portfolioData成为 IProject[] | [] 的联合类型.在这种情况下，它是无用的并导致错误。 IProject[] 类型的任何变量可以容纳空数组。所以不需要创建 IProject 类型数组的联合。和 any 类型的数组(没有类型的方括号被认为是 any 类型)。

纠正错误只是做

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

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