反应 - Function 从 keydown 事件调用时不知道 state

Question

我一直在学习 React，并在此过程中使用 class 组件构建了一个待办事项应用程序。 最近我一直在努力使用函数和钩子而不是类来制作 todo 应用程序的副本。

重构代码后，除了一个用例之外，一切似乎都正常工作。

案例 1：当输入输入并单击“添加”按钮调用addItem()时，新的待办事项按预期添加。

案例 2：当输入输入并按下回车键以触发调用addItem()的事件处理程序时， newItem的值始终与其初始值相同。

我一生都无法弄清楚为什么addItem()在单击“添加”按钮与按下“Enter”键时表现不同。

TodoAppContainer.js

import React, { useState, useEffect } from 'react';
import TodoList from './TodoList';
import TodoForm from './TodoForm';
import { GenerateID } from './generateId';

export default function TodoListContainer(props) {

    const [newItem, setNewItem] = useState('New Todo');
    const [items, setItems] = useState([{
        name: 'Build Todo List App',
        done: true,
        key: GenerateID.next().value
    }]);

    const handleKeyDown = e => {
        if (e.key === 'Enter') addItem();
    };

    const handleChange = ({ target }) => {
        console.log("handleChange");
        // capture text from input field
        const text = target.value;

        // update state value for "newItem"
        setNewItem(text);
    };

    const addItem = () => {
        console.log("addItem");
        // exit early if there is no item
        if (!!!newItem.trim()) return;

        // build new item to add
        const itemToAdd = {
            name: newItem,
            done: false,
            key: GenerateID.next().value
        };

        // update state with new item
        setItems(prevItems => [itemToAdd, ...prevItems]);

        // clear text for new item
        setNewItem('');
    };

    const completeItem = key => {
        console.log('completeItem');
        // create new copy of state items
        const updatedItems = [...items];

        // get the index of the item to update
        const index = updatedItems.findIndex(v => v.key === key);

        // toggle the done state of the item
        updatedItems[index].done = !updatedItems[index].done;

        // update the state
        setItems(updatedItems);
    };

    const removeItem = key => {
        console.log('removeItem');
        // create copy of filtered items
        const filteredItems = items.filter(v => v.key !== key);

        // update the state of items
        setItems(filteredItems);
    }

    // get count of items that are "done"
    const getTodoCount = () => items.filter(v => v.done).length;

    useEffect(() => {
        document.addEventListener('keydown', handleKeyDown);
        return () => document.removeEventListener('keydown', handleKeyDown);
    }, []);

    return (
        <section className='todo-section'>
            <TodoForm
                newItem={newItem}
                handleChange={handleChange}
                addItem={addItem}
            />
            <TodoList
                items={items}
                count={getTodoCount()}
                onClick={completeItem}
                onRemove={removeItem}
            />
        </section>
    );
}

TodoForm.js

import React from 'react';
import PropTypes from 'prop-types';

export default function TodoForm(props) {
    const { newItem, handleChange, addItem } = props;
    return (
        <div className='todo-form'>
            <input type='text' value={newItem} onChange={handleChange} />
            <button onClick={addItem}>Add</button>
        </div>
    )
}

TodoForm.propTypes = {
    newItem: PropTypes.string.isRequired,
    addItem: PropTypes.func.isRequired,
    handleChange: PropTypes.func.isRequired
};

TodoList.js

import React from 'react';
import PropTypes from 'prop-types';

export default function TodoList(props) {
    const { items, count, onClick, onRemove } = props;
    const shrug = '¯\\_(ツ)_/¯';
    const shrugStyles = { fontSize: '2rem', fontWeight: 400, textAlign: 'center' };

    const buildItemHTML = ({ key, name, done }) => {
        const className = done ? 'todo-item done' : 'todo-item';
        return (
            <li className={className} key={key}>
                <span className='item-name' onClick={() => onClick(key)}>{name}</span>
                <span className='remove-icon' onClick={() => onRemove(key)}>&#10006;</span>
            </li>
        );
    };

    return (
        <div>
            <p style={{ margin: 0, padding: '0.75em' }}>{count} of {items.length} Items Complete!</p>
            <ul className='todo-list'>
                {items.length ? items.map(buildItemHTML) : <h1 style={shrugStyles}>{shrug}<br />No items here...</h1>}
            </ul>
        </div>
    );
};

TodoList.propTypes = {
    count: PropTypes.number.isRequired,
    items: PropTypes.array.isRequired,
    onClick: PropTypes.func.isRequired,
    onRemove: PropTypes.func.isRequired
};

Answer 1

尝试将此添加到您的输入中：

<input type='text' value={newItem} onChange={handleChange} onKeyDown={(event) => {
          if (event.key === "Enter") {
            addItem();
          }
        }}/>

并从您的 useEffect() 中删除 eventListener - 实际上您可以删除整个 useEffect() 因为它只尝试处理您的 eventListener ...

Answer 2

这是陈旧关闭的经典案例。 您只在组件安装时将 keydown 事件添加到文档一次，并且它仅在第一次渲染时记住 function，此时 state 是默认字符串。

解决它的一种方法是将newItem作为依赖项添加到您的useEffect ，您还可以在新待办事项的输入上使用onKeyDown道具，但这可能不会像您预期的那样起作用（例如，输入需要关注事件火）

Answer 3

发生这种情况是因为您在useEffect中添加了事件侦听器，而此时newItem的值是您的初始 newItem。

为了使其工作，您可以将 newItem 添加到依赖数组以更新事件侦听器，每次 newItem 更新。

useEffect(() => {
        document.addEventListener('keydown', handleKeyDown);
        return () => document.removeEventListener('keydown', handleKeyDown);
    }, [newItem]);

然而，这只是一个解决方案，而不是推荐的解决方案。 以这种方式添加事件监听器不是很 React-ish。

而不是在 useEffect 中编写事件侦听器。您应该像这样绑定事件

export default function TodoForm(props) {
    const { newItem, handleChange, addItem ,handleKeyDown} = props;
    return (
        <div className='todo-form'>
            <input type='text' 
                value={newItem} 
                onChange={handleChange} 
                onKeyDown={handleKeyDown}// this is new
             />
            <button onClick={addItem}>Add</button>
        </div>
    )
}

并且不要忘记将它添加到父组件中

<TodoForm
                newItem={newItem}
                handleChange={handleChange}
                handleKeydown={handleKeydown}//this is new
                addItem={addItem}
            />