Javascript 反应：在Submit上获取数据，而不是在onChange上

我让这个代码按照我想要的方式工作。但是，它会在每次击键后获取和显示数据。当我点击提交时，我只想让它取一次

此外，如果我正在做的任何事情不是“最佳实践”，请让我知道，这样我以后就不会犯愚蠢的错误

import React，{useffect，useState}来自“React”；
导出默认函数App（）{
const[data，setData]=useState（null）；
const[query，setQuery]=useState（“”）；
useffect（（）=>{
如果（！query）返回；
异步函数fetchData（）{
const response=等待获取(
`https://www.omdbapi.com/?apikey=2e8b5857&s=${query}`
);
const data=wait response.json（）；
const results=data.Search；
setData（结果）；
}
fetchData（）；
}，[查询]；
常量handleSubmit=（e）=>{
e、 预防默认值（）；
setQuery（查询）；
};
返回(


输入电影：{'}
{
setQuery（如target.value）；
}}
/>
setQuery}/>
{数据&&
data.map（（电影）=>(
{movie.Title}
{movie.Year}{movie.imdbID}
))}
);
}

由于您只需要在

提交之后才需要它，因此您可以使用
[query]
跳过
使用效果
，只需将相同的逻辑复制到您的
handleSubmit
中，如下所示：-

import React, { useEffect, useState } from "react";

export default function App() {
  const [data, setData] = useState(null);
  const [query, setQuery] = useState("");


  const handleSubmit = (e) => {
    e.preventDefault();
    if (!query) return;

    async function fetchData() {
      const response = await fetch(
        `https://www.omdbapi.com/?apikey=2e8b5857&s=${query}`
      );
      const data = await response.json();
      const results = data.Search;
      setData(results);
    }
    fetchData();
  };

  return (
    <div
      style={{
        margin: 20,
      }}
    >
      <form onSubmit={handleSubmit}>
        <br />
        <label>
          Input Movie:{" "}
          <input
            type="text"
            placeholder="ex. Harry Potter"
            value={query}
            onChange={(e) => {
              setQuery(e.target.value);
            }}
          />
        </label>
        <input type="submit" value="Submit"/>
      </form>

      {data &&
        data.map((movie) => (
          <div key={movie.imdbID}>
            <h1>{movie.Title}</h1>

            <h4>
              {movie.Year} | {movie.imdbID}
            </h4>

            <img alt={movie.imdbID} src={`${movie.Poster}`} />
          </div>
        ))}
    </div>
  );
}

import React，{useffect，useState}来自“React”；
导出默认函数App（）{
const[data，setData]=useState（null）；
const[query，setQuery]=useState（“”）；
常量handleSubmit=（e）=>{
e、 预防默认值（）；
如果（！query）返回；
异步函数fetchData（）{
const response=等待获取(
`https://www.omdbapi.com/?apikey=2e8b5857&s=${query}`
);
const data=wait response.json（）；
const results=data.Search；
setData（结果）；
}
fetchData（）；
};
返回(


输入电影：{'}
{
setQuery（如target.value）；
}}
/>
{数据&&
data.map（（电影）=>(
{movie.Title}
{movie.Year}{movie.imdbID}
))}
);
}

下面是代码沙盒：-

传递useEffect中的代码，即提交函数中的fetch函数。让useEffect闲置
就像@Lakshya Thakur回答Hanks！所以
useffect
在这个上下文中没有真正的用途？是的，在这个用例中没有