javascript - 在 Preact 中映射状态数组
问题描述
以前没有使用过 Preact,所以我想知道这是否只是图书馆的另一个怪癖。虽然我试图像往常一样映射一组状态,但它并没有<li>
像我想的那样输出。
import { h, Preact, setState } from 'preact';
import { useEffect } from 'preact/hooks';
import style from './style.css';
const state = { todos: [], text: '' };
const submitTodo = (e) => {
e.preventDefault(e);
addItem();
}
const addItem = () => {
state.todos.push(inputValue());
}
const inputValue = () => {
const todoInput = document.querySelector('.todoInput');
let inputItem = todoInput.value;
return inputItem;
}
const ToDo = () => (
<div class={style.todo}>
<h1 class="title">ToDo</h1>
<ul class="todoList">
{state.todos.map((item, i) =>{
<li key={i}>{item}</li>
})}
</ul>
<form onSubmit={addItem}>
<input type="text" placeholder="Add a todo item here..." class="todoInput" onInput={inputValue}/>
<button type="submit" class="updateBtn" onClick={submitTodo}>Add Task</button>
</form>
</div>
);
export default ToDo;
我已经检查过我编写的代码实际上是否正确地映射了状态(它通过控制台日志在其他任何地方进行)但在ToDo
组件内部它不会映射。
希望有人能告诉我我犯了什么菜鸟错误?如果您能帮助我在<li>
!
解决方案
您需要ToDo
在状态更改后重新渲染。否则它将始终显示初始状态。
推荐阅读
- java - Drools,查阅大量历史的最佳做法是什么
- php - 使用 Behat 进行 PHP 集成测试
- typescript - 将服务注入网关 - NestJS
- pyspark - 带有 eol 错误的笔记本参数记录错误代码
- firebase - 为什么来自 Functions Logger 的错误不会显示在错误报告中?
- python - 检测何时按下 Ctrl(或其他修饰键)的正确方法
- javascript - 当我运行我的 `node file.js 1 23 44` 脚本时,它不会打印任何东西
- android-studio - 尝试调用虚拟方法 'com.google.android.gms.location.LocationRequest
- c# - 控制台应用程序在第二次调用时最小化错误
- python - TypeError:text_get()缺少1个必需的位置参数:'self'(Tkinter)