유형 스크립트를 사용하여 상태 후크 사용에서 받은 배열 표시

유형 스크립트를 사용하여 상태 후크 사용에서 받은 배열 표시

use state hook에서 받은 맵을 사용하여 정보 배열을 표시하려고 합니다.지도 함수를 작성할 때 "콜 서명이 없는 유형의 식을 호출할 수 없습니다"라는 메시지가 나타납니다.오류. 동일한 정보를 반환하는 함수를 생성하여 호출해도 오류가 발생하지 않습니다.

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

저는 다른 기능을 호출하지 않고 리턴 섹션 내에서 간단한 지도로 정보를 표시하는 방법을 알고 싶습니다.내가 뭘 잘못하고 있는 거지?

당신의 오류는 이 라인입니다.

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

portfolioData의 조합 형태가 되다IProject[] | []이 경우에는 유용하지 않으며 오류가 발생합니다.모든 유형의 변수IProject[]빈 배열을 저장할 수 있습니다.따라서 유형 배열의 결합을 만들 필요가 없습니다.IProject및 유형 배열any(유형이 없는 사각형 대괄호는 유형으로 간주됩니다.any).

오류를 수정하려면 다음과 같이 하십시오.

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

이러한 문제가 발생하는 이유를 자세히 알아보려면 이 문서(문제를 가장 잘 설명함)와 이 문서를 읽어보는 것이 좋습니다.

언급URL : https://stackoverflow.com/questions/56918950/displaying-an-array-received-from-usestate-hook-with-typescript