Question

我开始在业余时间学习反应。启动Hooks时，将调用setState方法两次。实时代码位于

https://codesandbox.io/s/elastic-saha-mdwwc?file=/src/App.js

添加按钮可以正常工作，但是当我按Enter键时，setState函数被调用了两次。最初的想法是重新渲染内容。但是我有useEffect依赖项作为一个空数组。因此，没有完成任何重新渲染，而且我不确定如何调试它。任何帮助表示赞赏：）


const App = () => {
  const [text, setText] = useState('');

  const [list, setList] = useState([]);

  const addToList = () => {
    if (text !== '') {
      setList([...list, text]);
      setText('');
    }
  }

  const deleteItem = index => {
    const deletedList = list.filter((_, i) => i !== index);
    setList(deletedList)
  }
  useEffect(() => {
    console.log("Reloaded");
    const listener = e => {
      if (e.code === 'Enter') {
        console.log("event triggered")
        setText(text => {
          if (text !== '') {
            console.log("updating")
            setList(a => ([...a, text]));
          }
          return ''
        });
      }
    }
    document.getElementById('textbox').addEventListener('keyup', listener);
    console.log('Event registered')
    return () => {
      document.getElementById('textbox').removeEventListener('keyup', listener);
      console.log('Event deregistered')

    }
  }, [])
  return (
    <div >
      <input type="text" id="textbox" onChange={(e) => setText(e.target.value)} value={text} />
      <button id="add" onClick={addToList}> Add</button>
      <ul>
        {
          list.map((a, i) => <li key={i}>{a} <button type="button" onClick={() => deleteItem(i)}>Delete</button></li>)
        }
      </ul>
    </div>
  );
}

export default App;

Answer 1

我认为这是因为您的代码中的float* input; ... input = new float[4]; input[0] = 1.0; input[1] = 2.0; input[2] = 3.0; input[3] = 4.0; ... output = NN.FeedForward(input); ... delete[] input;中的原因

useEffect

将其更改为以下内容：

setText(text => {
    if (text !== '') {
        console.log("updating")
        setList(a => ([...a, text]));
    }
    return ''
});

或者，

useEffect(() => {
    console.log("Reloaded");
    const listener = (e) => {
      if (e.code === "Enter") {
        console.log("event triggered");
        if (text !== "") {
          console.log("updating");
          setList((a) => [...a, text]);
        }
        return "";
      }
    };
    document.getElementById("textbox").addEventListener("keydown", listener);
    console.log("Event registered");
    return () => {
      document
        .getElementById("textbox")
        .removeEventListener("keydown", listener);
      console.log("Event deregistered");
    };
  }, [text]);

OR

该事件使用useEffect(() => { console.log("Reloaded"); const listener = (e) => { if (e.code === "Enter") { console.log("event triggered"); if (e.target.value !== "") { console.log("updating"); setList((a) => [...a, e.target.value]); } e.target.value = ""; return ""; } }; document.getElementById("textbox").addEventListener("keydown", listener); console.log("Event registered"); return () => { document .getElementById("textbox") .removeEventListener("keydown", listener); console.log("Event deregistered"); }; });事件，并且在安装组件后仅运行一次onKeyPress

useEffect

https://codesandbox.io/s/winter-dust-r3ylc?file=/src/App.js

在事件监听器中两次调用React UseState

1 个答案: