首页  >  问答  >  正文

方法 .map 在应用程序 React 中不起作用

对象的.map方法不起作用,我无法与我导入的API的对象进行交互。在浏览器的控制台上我读取了该对象。

这是一个组件 razze("races")

const BASE_URL = "https://www.dnd5eapi.co/api/races";



const ListaRazze = () => {
  const [razze, setRazze] = useState<RazzeArray>();

  useEffect(() => {
    fetch(BASE_URL)
      .then((res) => res.json())
      .then((results) => {
        console.log('result', results);
        setRazze(results);

        const prova = Object.values(results);
      })
      .catch((error) => {
        console.error('Error:', error);
      });
  }, []);

  return (
    
     <>
      {razze && razze.razze ? (
        razze.razze.map(({ indice, name, url }) => (
          <div key={indice}>{name} {url}</div>
        ))
      ) : (
        <div>Loading...</div>
      )}
    </>
  );
};

export default ListaRazze;

这是包模型中的接口

export interface RazzeArray {
    count: number
    razze: Razza[]
  }
  
  export interface Razza {
    indice: number
    name: string
    url: string
  }

能够进入对象

P粉495955986P粉495955986222 天前353

全部回复(1)我来回复

  • P粉127901279

    P粉1279012792024-04-03 12:07:48

    您收到的数据与您在界面中期望的数据不同。观察 api 结果 的属性并匹配属性名称。

    我还建议您将代码保留为英文,以保持一致性和清晰性。

    export interface IRaceList {
      count: number
      results: IRace[]
    }
      
    export interface IRace {
      index: number
      name: string
      url: string
    }

    为您所在的州设置初始值。这也将使您的代码更加可预测和一致。如果您不想要初始状态,请确保类型反映这一点。

    const RaceList = () => {
      const [raceList, setRaceList] = useState<IRaceList>({
        count: 0,
        results: []
      });
    
      useEffect(() => {
        fetch(BASE_URL)
          .then((res) => res.json())
          .then((results: IRaceList) => {
            setRaceList(results);
          })
          .catch((error) => {
            console.error('Error:', error);
          });
      }, []);
    
      return (
         <>
          {raceList.count ? (
            raceList.results.map(({ index, name, url }) => (
              <div key={index}>{name} {url}</div>
            ))
          ) : (
            <div>Loading...</div>
          )}
        </>
      );
    };

    回复
    0
  • 取消回复