javascript - 反应：在提交上获取数据，而不是在 onChange 上

Question

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

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

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

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

  useEffect(() => {
    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();
  }, [query]);

  const handleSubmit = (e) => {
    e.preventDefault();
    setQuery(query);
  };

  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" onClick={() => setQuery} />
      </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>
  );
}

标签： javascriptreactjsreact-hooksfetch-api

Answer 1

由于您只想要它之后submit，您可以跳过useEffectwith[query]并在您的handleSubmitlike 中复制相同的逻辑：-

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

这是代码框：-