將函數轉換為數組打字稿

Question

我嘗試了從 usePersonList() 獲得的數組中的 map() dataURL，但我不知道如何將我的函數轉換為數組以在單擊按鈕后不顯示錯誤。

import Axios from "axios";
import React, { useEffect, useState } from "react";
import styles from "../styles/Form.module.scss";

export function usePersonList() {
  const [dataURL, setDataURL] = useState<any[]>([]);

  useEffect(() => {
    Axios.get(
      "https://g.tenor.com/v1/search?q=" +
        "mems" +
        "&key=" +
        "MY_TENOR_API_KEY" +
        "&limit=" +
        "1"
    ).then((res) => setDataURL(res.data));
  }, []);

  return dataURL;
}

export function getData(data: Array<string>) {  //Here I try to convert data to an array
  const dataURL = usePersonList();
  return (data = dataURL);
}

const data: Array<string> = [];

function Form() {
  const dataURL = getData(data);

  return (
    <div className={styles.container}>
      <div className={styles.form}>
        <input
          type="button"
          value={"button"}
          onClick={() =>
            dataURL.map((person: { url: string }) => <li>{person.url}</li>) //On this line I got error: TypeError: dataURL.map is not a function
          }
        />
      </div>
    </div>
  );
}

export default Form;

我搜索了一些教程，但沒有一個對我遇到的問題有幫助。

Answer 1

您不能在組件外部使用反應鈎子，也不能在函數內部使用鈎子，它們必須在組件的主體中調用

你可以做這樣的事情

import Axios from "axios";
import React, { useEffect, useState } from "react";
import styles from "../styles/Form.module.scss";

export function fetchPeople() {
    return Axios.get(
      "https://g.tenor.com/v1/search?q=" +
        "mems" +
        "&key=" +
        "MY_TENOR_API_KEY" +
        "&limit=" +
        "1"
    ).then(d => /*your trasformation here*/)
  
}



const data: Array<string> = [];

function Form() {
  const [dataURL, setDataURL] = useState<any[]>([])
  useEffect(async () => {
    const data = await fetchPeople()    
    setDataURL(data)
   }, [])

  return (
    <div className={styles.container}>
      <div className={styles.form}>
        <input
          type="button"
          value={"button"}
          onClick={() =>
            dataURL.map((person: { url: string }) => <li>{person.url}</li>) //On this line I got error: TypeError: dataURL.map is not a function
          }
        />
      </div>
    </div>
  );
}

export default Form;

Answer 2

您使用dataURL.map((person: { url: string }) => {}) ，並在那里有人員，因此您的數據不是字符串 []，但如果您希望它是字符串 []，只需設置

const [dataURL, setDataURL] = useState<string[]>([]);

getData(data) 根本沒有意義，看起來你可以在 Form 組件中使用 usePersonList() ；

//------------------------------------------------

import Axios from "axios";
import React, { useEffect, useState } from "react";
import styles from "../styles/Form.module.scss";

interface IPerson {
  person: {
    url: string;
  }
}

export function usePersonList() {
  const [dataURL, setDataURL] = useState<IPerson[]>([]);

  useEffect(() => {
    Axios.get(
      "https://g.tenor.com/v1/search?q=" +
        "mems" +
        "&key=" +
        "MY_TENOR_API_KEY" +
        "&limit=" +
        "1"
    ).then((res) => setDataURL(res.data || []));
  }, []);

  return dataURL;
}

function Form() {
  const dataURL = usePersonList();

  return (
    <div className={styles.container}>
      <div className={styles.form}>
        <input
          type="button"
          value={"button"}
          onClick={() =>
            dataURL.map(({ url }) => <li>{url}</li>)
          }
        />
      </div>
    </div>
  );
}

export default Form;