Отображение массива состояний в Preact - PullRequest
Новая
       24

Отображение массива состояний в Preact

0 голосов
/ 27 октября 2019

Ранее не использовался 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 он только что выиграл 't map.

Надеюсь, кто-нибудь подскажет, какую ошибку новичка я делаю? Я был бы очень признателен, если бы вы могли помочь мне правильно отобразить состояние в <li>!

1 Ответ

0 голосов
/ 27 октября 2019

Вам нужно сделать ToDo повторное рендеринг после изменения состояния. В противном случае он всегда будет показывать начальное состояние.

...