Ловушки React не могут отобразить массив в JSX

Question

Я действительно искал во многих местах inte rnet и не могу на всю жизнь найти решение вокруг моей проблемы.

Я не могу отобразить массив в JSX моего React. Я мог делать это в прошлом без особых усилий, но по какой-то причине, когда я решил попрактиковаться в некоторых React Hooks, все стало слишком сложно.

Вот мой код:

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;

Не берите в голову имена хромых переменных, это всего лишь мой тренировочный проект.

Любой вклад определенно будет полезен. Что я делаю не так?

Answer 1

За исключением init definitions как массива, чтобы предотвратить отображение строки, как указано @Nilanka Manoj, когда вы отображаете синтаксис HTML после map, убедитесь, что вы поставили return. Например:

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

или вы можете сделать что-то вроде этого

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

Answer 2

Вы используете searchTerm в handleSubmit, которые относятся к значению закрытия. React не будет обновлять функцию handleSubmit каждый раз при рендеринге, поэтому вы всегда получите старое значение searchTerm, которое будет пустым при щелчке пользователя.

Вы можете использовать useCallback и добавить searchTerm как зависимости

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]);

Answer 3

инициализировать пустой массив здесь:

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