React hooks 不能在 JSX 中使用 map 数组

Question

I've really searched in many places of the internet and cannot for the life of me find a solution around my problem.

I'm unable to map through an array within my React's JSX. I've been able to do it in the past effortlessly but for some reason, when I decided to practice some React Hooks, things got way too tricky.

Here is my code:

import "./App.css";
import axios from "axios";

const Search = () => {

// takes information written in input field.
  const handleChange = (e) => {
    e.preventDefault();
    const lookUp = e.target.value;
    setSearchTerm(lookUp);
    return lookUp;
  };

  // useState for searcing the term in the search box
  const [searchTerm, setSearchTerm] = useState("");

  // useState for submitting the form and getting a result
    const [word, setWord] = useState("")
    const [definitions, setDefinitions] = useState("")


  const handleSubmit = (e) => {
    const apiKey = "secretsecret";
    const apiURL = `https://www.dictionaryapi.com/api/v3/references/thesaurus/json/${searchTerm}?key=${apiKey}`;
      e.preventDefault();

    axios({
      method: "GET",
      url: apiURL,
      dataResponse: "json",
    }).then((res) => {

        res.data.map(wordInfo => {

            const wordArray = Object.values(wordInfo)
            setWord(wordInfo.hwi.hw)

            if (wordInfo.hwi.hw === searchTerm) {

                const defsArray = wordInfo.shortdef;

                setDefinitions(defsArray)

                const syns = wordInfo.meta.syns;
                syns.map(synWords => {
                    synWords.map(wordsLol => {


                    })
                })
            }
        })
    });
  };

return (
  <div>
    <div className="searchForm">

      <form action="" onSubmit={handleSubmit}>
        <label htmlFor="searchBox">Look up a word</label>
        <input type="text" id="searchBox" onChange={handleChange} />
        <input type="submit" value="Search me!" />
      </form>
    </div>
        <div className="wordInfo">
            {definitions.map(test => {
                console.log(test)
            })}
        </div>
  </div>
);
};

export default Search;

Don't mind the lame variable names, this is just my practice project.

Any input would definitely be helpful. What do I seem to be doing wrong?

Answer 1

initialize empty array here:

const [definitions, setDefinitions] = useState([])

Answer 2

Except init definitions as array to prevent mapping a string as @Nilanka Manoj stated, when you render HTML syntax after map , make sure you have put return . For example:

<div className="wordInfo">
            {definitions.map(test => {
                return (
                   //your HTML syntax
                )
            })}
</div>

or you can do sth like this

<div className="wordInfo">
            {definitions.map(test => (
                   //your HTML syntax
            ))}
</div>

Answer 3

You use searchTerm in handleSubmit which refer to a closure value. React won't update handleSubmit function every time render, so you always get old value of searchTerm which is empty when user click.

You could use useCallback and add searchTerm as dependencies

const handleSubmit = useCallback((e) => {
    const apiKey = "secretsecret";
    const apiURL = `https://www.dictionaryapi.com/api/v3/references/thesaurus/json/${searchTerm}?key=${apiKey}`;
      e.preventDefault();

    axios({
      method: "GET",
      url: apiURL,
      dataResponse: "json",
    }).then((res) => {

        res.data.map(wordInfo => {

            const wordArray = Object.values(wordInfo)
            setWord(wordInfo.hwi.hw)

            if (wordInfo.hwi.hw === searchTerm) {

                const defsArray = wordInfo.shortdef;

                setDefinitions(defsArray)

                const syns = wordInfo.meta.syns;
                syns.map(synWords => {
                    synWords.map(wordsLol => {


                    })
                })
            }
        })
    });
  }, [searchTerm]);