如何在React钩子中用表单控制台.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

您可以使用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 2

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

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

编辑

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

<form onSubmit={onSubmit}>

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

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;