Map a React Hook在使用TypeScript的NextJS上不起作用

u4vypkhs 于 2023-10-22 发布在 TypeScript

关注(0)|答案(2)|浏览(148)

我使用NextJS在表中显示从DB获得的数据，一旦我获取数据，我想使用map函数创建表行，然后将其插入表中

import React, {useEffect, useState} from 'react'
import { Container, Table } from 'react-bootstrap'
import axios from 'axios'

export default function index() {

  const [object, setObject] = useState({
    type: '',
    date: '',
    user: 0
  })
  const fetchData = async () =>{
    const results = await axios.get(`my api url`)
    setObject(results.data.result)
  }

  useEffect(() =>{
    fetchData()
  },[])

  if(object.user != 0){
    const objectRow = object.map(
      (index: any) =>{
          return(
              <tr>
                  <td>{index.type}</td>
                  <td>{index.date}</td>
                  <td>{index.user}</td>
              </tr>
          )
      }
    )*/
  }

  return (
    <Container>
      <Table bordered hover >
        <thead>
          <tr>
            <th>Type</th>
            <th>Date</th>
            <th>User/th>
          </tr>
        </thead>
        <tbody>
          {objectRow}
        </tbody>
      </Table>
    </Container>
  )
}

我得到一个错误Property 'map' does not exist on type，后面跟着object的属性。
我的方法有问题吗？如何Map数据？

typescript

来源：https://stackoverflow.com/questions/77318752/map-a-react-hook-is-not-working-on-nextjs-using-typescript

2条答案

按热度按时间

bpsygsoo1#

object不是数组。使用

const [object, setObject] = useState([{
  type: '',
  date: '',
  user: 0
}])

使其成为数组。
并确保API调用的结果是一个数组。

赞(0）回复(0）举报 2023-10-22

jjhzyzn02#

你好你提供的代码有一些错误，我提供了一个可能更好的版本的代码

import * as  React from 'react'
import { Container, Table } from 'react-bootstrap'
import axios from 'axios'

interface ResponseDataType {
  type: string;
  date: string;
  user: string;
}

export const IndexPage: React.FC = () => {

const [isLoading, setIsLoading] = React.useState<boolean>(false);
const [responseData, setresponseData] = React.useState<ResponseDataType[] 
| null>(null);

const fetchData = async () => {
  try {
    setIsLoading(true);
    const response = await axios.get(`my api url`);
    setresponseData(response.data.result);
  } 
  catch (error) {
    setIsLoading(false);
    /* 
       it's on you how you want to show errors
    */
    console.log(error);
    } 
    finally {
      setIsLoading(false);
    }
}

React.useEffect(() => {
    fetchData();
}, []);

/*
    you can return you'r custom loading component
*/
if (isLoading) {
    return <h1>Loading...</h1>
}

return (
    <Container>
        <Table
            bordered
            hover
        >
            <thead>
                <tr>
                    <th>Type</th>
                    <th>Date</th>
                    <th>User</th>
                </tr>
            </thead>
            <tbody>
                {!isLoading && responseData && (
                        responseData.map((item: ResponseDataType) => (
                            <tr>
                                <td>{item.type}</td>
                                <td>{item.date}</td>
                                <td>{item.user}</td>
                            </tr>
                        ))
                    )}
            </tbody>
        </Table>
    </Container>
);

}

赞(0）回复(0）举报 2023-10-22

我来回答

Map a React Hook在使用TypeScript的NextJS上不起作用

2条答案

相关问题

热门标签

最新问答