reactjs - TS React：buildArray 不是函数

Question

最小化我当前的问题，我有这个：

// inside a functional component
  const buildArray: any = ["1", "2"].map((value: string, index) => {   
    return (
      <li key={`${value}`}>{value}</li>
    )
  });

  return (
    <div>
      <StyledTopNav>
        {buildArray()}
      </StyledTopNav>
    </div>
  )

TypeError: buildArray is not a function
push../src/components/TopNav.tsx.__webpack_exports__.default
src/components/TopNav.tsx:42
  39 | 
  40 | return (
  41 |   <div>
> 42 |     <StyledTopNav>
     | ^  43 |       {buildArray()}
  44 |     </StyledTopNav>
  45 |   </div>

有人知道这个问题吗？li当我直接在样式化的JSX 组件中编写元素时ul，一切正常（但是li's 之间存在代码重复。我复制ul下面的样式以防万一。

const StyledTopNav = styled.ul`
  text-decoration: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  list-style-type: none;
  border: 2px dashed orange;
`;

标签： reactjstypescript

Answer 1

错误在 的声明中buildArray，您可以使用以下代码将其声明为函数：

const buildArray = () => {
  return [0, 1, 2, 3].map(i => {
    return (
      <div>
        {i}
        </div>
    )
  })
}