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;

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

3 个答案: