Converting function to array typescript-CodePudding

I tried map() dataURL from array I got from usePersonList() but I have no idea how to convert my function to array to not show an error after clicking a button.

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;

I searched some tutorials but none of them helped with the problem I have.

CodePudding user response：

you cannot use react hooks outside of a component and you cannot use hooks inside a function they have to be called in the main body of the component

you can do something like this

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;

CodePudding user response：

you use dataURL.map((person: { url: string }) => {}), and have person there, therefore your data is not a string[], but if you want it to be a string[] just set

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

getData(data) doesn't make sense at all, looks like you could have just used usePersonList() inside Form component;

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

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;