我一直在学习React，并在学习过程中使用类组件构建了一个todo应用程序。最近，我一直在使用函数和钩子而不是类来复制todo应用程序。
重构了代码之后，除了一个用例之外，所有的东西似乎都正常工作。
CASE 1:当输入并点击"；添加"；按钮调用addItem()，新待办事项按预期添加。
CASE 2:在输入中键入并点击回车键以触发调用addItem()的事件处理程序时，newItem的值始终与其初始值相同。
我一辈子都搞不清楚为什么CCD_；添加"；按钮与按下"；输入"；钥匙
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)}>✖</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
};
之所以会发生这种情况，是因为您正在useEffect中添加事件侦听器，而此时newItem的值是您的初始newItem。
为了使其工作，您可以将newItem添加到dependency数组中，以在每次newItem更新时更新事件侦听器。
useEffect(() => {
document.addEventListener('keydown', handleKeyDown);
return () => document.removeEventListener('keydown', handleKeyDown);
}, [newItem]);
然而，这只是一个解决方案，而不是推荐的解决方案。以这种方式添加事件侦听器不是很React。
而不是在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}
/>
尝试将其添加到您的输入中：
<input type='text' value={newItem} onChange={handleChange} onKeyDown={(event) => {
if (event.key === "Enter") {
addItem();
}
}}/>
并从你的useEffect((中删除eventListener-实际上你可以删除整个useEffect，因为它只试图处理你的eventListener。。。
这是一个过时闭包的经典案例。当组件装载时，只向文档中添加一次keydown事件，并且当状态为默认字符串时，它只在第一次渲染时记住函数。
解决这个问题的一种方法是将newItem添加为useEffect的依赖项，您也可以在新todo的输入中使用onKeyDown道具，但这可能不会像您预期的那样起作用(例如，需要集中输入以触发事件(