javascript - 反应钩子redux reducer onChange事件迟到最后输入
问题描述
我正面临当前的问题。每当我单击按钮时+
,onChange
当我尝试将该值保存到localStorage
我是redux
新手react hooks
我怎么可能解决这个问题?
行动
const ADD_BIRD = 'ADD_BIRD';
const INCREMENT_BIRD = 'INCREMENT_BIRD';
export function addBird(bird) {
return {
type: ADD_BIRD,
bird,
}
}
export function incrementBird(bird) {
return {
type: INCREMENT_BIRD,
bird
}
}
let defaultBirds = [];
if (window.localStorage.getItem('bird') !== null) {
defaultBirds.push(
{
name: 'robin',
// get localStorage value as number
views: parseInt(window.localStorage.getItem('bird')),
}
);
} else {
defaultBirds.push(
{
name: 'robin',
views: 1,
}
);
}
减速器
function birds(state=defaultBirds, action) {
switch (action.type) {
case ADD_BIRD:
return [
...state,
{
name: action.bird,
views: 1
}
];
case INCREMENT_BIRD:
const bird = state.find(b => action.bird === b.name);
const birds = state.filter(b => action.bird !== b.name);
console.log("birds", typeof(bird.views));
// save to localStorage
window.localStorage.setItem('bird', bird.views);
return [
...birds,
{
...bird,
views: bird.views + 1
}
];
default:
return state;
}
}
应用程序.js
function App() {
const [birdName, setBird] = useState('');
const birds = useSelector(state => state.birds);
const dispatch = useDispatch();
const handleSubmit = event => {
event.preventDefault();
dispatch(...addBird(birdName), setBird())
setBird('');
};
useEffect(() => {
}, [birdName])
return (
<div className="wrapper">
<h1>Bird List</h1>
<form onSubmit={handleSubmit}>
<label>
<p>
Add Bird
</p>
<input
type="text"
onChange={e => setBird(e.target.value)}
value={birdName}
/>
</label>
<div>
<button type="submit">Add</button>
</div>
</form>
<ul>
{birds.map(bird => (
<li key={bird.name}>
<h3>{bird.name}</h3>
<div>
Views: {bird.views}
<button
onClick={() => dispatch(incrementBird(bird.name))}>
<span role="img" aria-label="add">
➕ # + SIGN IS HERE
</span></button>
</div>
</li>
))}
</ul>
</div>
);
}
export default App;
期待一些帮助。
解决方案
您正在设置 window.localStorage.setItem('bird', bird.views),而您实际上想要更新的视图 (bird.views + 1)。
推荐阅读
- python - 如何使用 Python 更改日期格式?
- java - HtmlUnitDriver 调用本地 html 文件
- python - Google Drive API 仅在“我的云端硬盘”中搜索文件
- node.js - AWS 提供的上传文件端点的 URL 导致 Error: SignatureDoesNotMatch after access it
- python - 如何在python中同一类的不同函数的文本框中显示文本
- android - Android NFC 标签 ID 识别不同的 NFC 卡类型
- python - Python 循环无法遍历 html 表的所有值
- qt - 如何在不手动操作 .ui 文件的情况下在 QtDesigner 中编辑 QtElement 的网格位置?
- python - DJANGO gte, lte 没有显示任何结果
- wpf - 从 WPF-Windows (XAML) 调用 WPF-Control 中的 RelayCommand