在onChange输入Reactjs上停止重新呈现

qvtsj1bj 于 2022-11-04 发布在 React

关注(0)|答案(2)|浏览(133)

console.log(result);在此处的代码中，每当输入中有onChange时，都会在控制台中记录。正在寻找一种方法，以在输入值更改时停止组件重新呈现。

import "./home.css";

const Home = () => {
  const [city, setCity] = useState("kampala");
  const [result, setResult] = useState(null);

  const fetchApi = async (city) => {
    const data = await fetch(
      `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=`api
key_here``
    ).then((res) => res.json())
    .then((data) => setResult(data));

  };

  useEffect(() => {
    fetchApi(city);
    console.log("heyy");
  }, []);

  const handleSubmit = async (e) => {
    e.preventDefault();
    await fetchApi(city);
  };

  if(result === null) {
    return <p>Loading</p>
  }

  console.log(result);//this is logged in the console on every character change in the input. need to stop the re-render

  return (
    <div className="home__container">
      <div className="home__img">
        <div className="home__hero__info">
          <div>
            <h1>26 C</h1>
          </div>
          <div>
            <h3>Kampala</h3>
            <p>31 - October - 2022</p>
          </div>
          <div>
            <p>Suuny</p>
          </div>
        </div>
      </div>
      <div className="home__details">
        <div className="weather__div">
          <form onSubmit={handleSubmit}>
            <input
              type="text"
              className="home__input"

              onChange={(e) => setCity(e.target.value)}

            />
            <button type="submit" className="weather__button">
              Search
            </button>
          </form>
          <div className="weather__ul">
            <ul>
              <li>Kampala</li>
              <li>Nairobi</li>
              <li>Dodoma</li>
            </ul>
          </div>
          <hr />
        </div>
        <div className="weather__div">
          <h4 className="h4">Weather Conditions</h4>
          <div>
            <span className="weather__details">
              <h4>Cloudy</h4>
              <h3>{result.clouds.all}%</h3>
            </span>
            <span className="weather__details">
              <h4>Humidity</h4>
              {/* <h3>{result.main.humidity}%</h3> */}
            </span>
            <span className="weather__details">
              <h4>Wind</h4>
              {/* <h3>{wind.speed}</h3> */}
            </span>
            <span className="weather__details">
              <h4>Rain</h4>
              <h3>23%</h3>
            </span>
          </div>
          <hr />
        </div>
      </div>
    </div>
  );
};

export default Home;

reactjs

来源：https://stackoverflow.com/questions/74308719/stop-re-render-on-onchange-input-reactjs

2条答案

按热度按时间

moiiocjp1#

如果您不希望在更新输入时发生重新渲染，而希望使用React ref来管理输入值，则更新状态将始终导致重新渲染

const city = useRef("kampala");

比里阁下输入：

<input
 type="text"
 className="home__input"
 value={city.current}       
 onChange={(e) => city.current = e.target.value}
 />

赞(0）回复(0）举报 2022-11-04

guicsvcw2#

简短回答：使用ref而不是state：

const initialValue = "kampala";

const Home = () => {
  const city = useRef();
  const [result, setResult] = useState(null);

  ...

  useEffect(() => {
    fetchApi(initialValue);
    console.log("heyy");
  }, []);

  const handleSubmit = async (e) => {
    e.preventDefault();
    await fetchApi(city.current.value);
  };

  ...

  return (
    <div className="home__container">
      ...
          <form onSubmit={handleSubmit}>
            <input
              type="text"
              ref={city}
              className="home__input"
              value={initialValue}      
            />
            <button type="submit" className="weather__button">
              Search
            </button>
          </form>
      ...
    </div>
  );
};

没那么久回答：
您正在通过一个状态存储city：状态的作用是在每次修改时触发重新渲染，所以当你在输入改变时更新city时，它就触发了渲染。
react中的引用是一种不同的机制：它们的作用是在不同的渲染中存储值，但react并不是在每次更新时都查看它们以重新渲染。“react way”是将ref与您的输入相关联：当你使用city.current时，你会得到当前呈现的HTML元素，然后你可以请求它的value，瞧：）

赞(0）回复(0）举报 2022-11-04

我来回答

在onChange输入Reactjs上停止重新呈现

2条答案

相关问题

热门标签

最新问答