在 Preact 中映射状态数组

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。否则它将始终显示初始状态。