Question

以前没有使用过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>中正确地绘制状态，我将不胜感激！

Answer 1

状态更改后，您需要重新渲染ToDo。否则，它将始终显示初始状态。

在Preact中映射状态数组

1 个答案: