console.log 呈現兩次

Question

我有問題，我從 React 中的 Hooks 方法開始，我有一個輸入搜索，當我按下“Enter”鍵時，這會加入一個設置值的函數。 問題是當我嘗試返回值時，在這種情況下，console.log("hi") 被打印兩次，我不知道為什么會發生這種情況，我嘗試使用條件運算符，但它總是呈現兩次。

import React, { useState } from "react";
import SearchAPI from "./SearchAPI";

export default function Search() {
  const searchRef = React.createRef();

  const [contentSearched, setContentSearched] = useState("");

  const handleSendSearch = e => {
    if (e.key === "Enter") {
      setContentSearched(searchRef.current.value);
    } else {
      setContentSearched("");
    }
  };

  return (
    <section className="searchbox-wrap">
      <input
        onKeyPress={handleSendSearch}
        ref={searchRef}
        placeholder="Search for a movie..."
        type="text"
        className="searchbox"
      />
      {contentSearched !== "" ? console.log("Hi") : <></>} -> Here i have the problem
    </section>
  );
}

安慰

Hi Search.js:19 
Hi Search.js:19 

謝謝

Answer 1

嘗試創建一個像這樣的更簡單的組件。 更新后您應該會看到 1 個以上的控制台日志。 我想也許沒有問題。

function Test() {
  const [clickedTimes, setClickedTimes] = React.useState(0);
  console.log('rendering')
  function clickHandler() {
    console.log('clicked triggered')
    setClickedTimes(clickedTimes + 1)
  }
  return <span onClick={clickHandler}>clicked: {clickedTimes}</span>
}

我希望這可以幫助你