如何使用 React 钩子中的表单进行 console.log 状态？

Question

当我在表单中提交文本时，我希望能够通过 console.log 查看该文本的状态。 我添加了一个 console.log 以在添加状态后直接触发，但我在控制台中看不到任何内容，我做错了什么？

我想看到什么：我提交“test1”然后我提交“test2”，然后我想在我的控制台中看到“test1，test2”的状态。

import React, { useState } from 'react';
import './App.css';

function App() {
    return (
      <div>
        <Field />
      </div>
    );
  }


function Field(){
  const [toDoItem, setToDoItem] = useState('');


  const addToDoItem = (event) => {
    setToDoItem(event.target.value), function(){
      console.log(toDoItem)
    }
  }

  return (
        <form>
            <input type="text" value={toDoItem} onChange={addToDoItem}/>
            <input type="submit" value="Add" />
        </form>
  );
}

export default App;

Answer 1

useState在设置值后不提供回调。 您可以改用useEffect 。

  React.useEffect(() => {
    console.log(toDoItem);
  }, [toDoItem]);

编辑

似乎您想在提交时获得 toDoItem 值。 问题是提交表单时页面会重新加载。 您可以使用event.prefentDefault()在表单提交时停止刷新。

<form onSubmit={onSubmit}>

  const onSubmit = (event) => {
    event.preventDefault()
    console.log(toDoItem)
  }

Answer 2

您可以使用useEffect记录状态的变化

如果您经常这样做，我建议您创建一个辅助函数：

function useLog(name, property) {
  useEffect(() => console.log(name, property), [name, property]);
}

您将使用如下：

useLog('toDoItem', toDoItem);

我设置了一个示例，其中 toDoItem 在更改时被记录，当您提交时，它还将更改记录在 todoItems 数组中

 const { useState, useEffect } = React; function useLog(name, property) { useEffect(() => console.log(name, property), [name, property]); } function App() { return ( <div> <Field /> </div> ); } function Field() { const [toDoItem, setToDoItem] = useState(''); useLog('toDoItem', toDoItem); const [todos, setTodos] = useState([]); useLog('todos', todos); const changeTodo = (event) => { setToDoItem(event.target.value); }; const addTodoItem = (event) => { event.preventDefault(); setTodos((prev) => prev.concat(toDoItem)); setToDoItem(''); }; return ( <form onSubmit={addTodoItem}> <input type="text" value={toDoItem} onChange={changeTodo} /> <input type="submit" value="Add" /> </form> ); } ReactDOM.render(<App />, document.getElementById('root'));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script> <div id="root"/>

Answer 3

import React, { useState } from 'react';
import './App.css';

function App() {
    return (
      <div>
        <Field />
      </div>
    );
  }


function Field(){
  const [toDoItem, setToDoItem] = useStateWithCallback('', toDoItem => {
    console.log(toDoItem);
  });


  const addToDoItem = (event) => {
    setToDoItem(event.target.value);
  }

  return (
        <form>
            <input type="text" value={toDoItem} onChange={addToDoItem}/>
            <input type="submit" value="Add" />
        </form>
  );
}

export default App;