console.log отображается дважды - PullRequest
Новая
       13

console.log отображается дважды

0 голосов
/ 01 апреля 2020

У меня проблема, я начинаю с методов Hooks в React, у меня есть поиск ввода, который, когда я нажимаю клавишу «Ввод», это объединяет в функцию, которая устанавливает значение. проблема в том, что когда я пытаюсь вернуть значение, в этом случае console.log («привет») печатается дважды, и я не знаю, почему это происходит, я пытаюсь использовать условные операторы, но он всегда рендерит дважды. 

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

Спасибо

1 Ответ

0 голосов
/ 01 апреля 2020

попробуйте создать более простой компонент, подобный этому. Вы должны увидеть более 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>
}

Я надеюсь, что это может помочь вам

...