Отображение массива, полученного от ловушки Usestate с Typescript - PullRequest
Новая
       10

Отображение массива, полученного от ловушки Usestate с Typescript

1 голос
/ 07 июля 2019

Я пытаюсь отобразить массив информации, используя карту, полученную из ловушки usestate. При написании функции карты я получаю «Невозможно вызвать выражение, тип которого не имеет подписи вызова». Ошибка. Если я создаю функцию, которая возвращает ту же информацию, и вызываю эту функцию, я не получаю сообщение об ошибке. 

    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>
      )
    }

Я хотел бы выяснить, как отображать информацию с помощью простой карты в разделе возврата без необходимости вызова другой функции. Что я делаю не так?

1 Ответ

2 голосов
/ 07 июля 2019

По вашей ошибке эта строка 

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

portfolioData становится типом объединения IProject[] | [].В этом случае это бесполезно и приводит к ошибке.Любая переменная типа IProject[] может содержать пустой массив.Поэтому нет необходимости создавать объединение массива типа IProject и массива типа any (квадратные скобки без типа рассматриваются как тип any).

Чтобы исправить ошибки, просто выполните 

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

И если вы хотите вникнуть в подробности, почему это происходит, я рекомендую прочитать this (лучше всего описывает проблему) и this .

...