功能组件中的 Preact clear array 不会删除所有输出答案

【问题标题】：Preact clear array in functional component does not remove all output功能组件中的 Preact clear array 不会删除所有输出
【发布时间】：2021-11-16 00:10:25
【问题描述】：

我对前端开发非常陌生，正在尝试构建一个简单的 todo 组件。我有重置阵列的问题。 DOM 中始终保留一项。但只有“DEL”按钮。

所有其他功能/挂钩按预期工作。

这是代码：

import { useState } from 'preact/hooks';

const Todo = () => {
  const [input, setInput] = useState('')
  const [todos, setTodos] = useState([])

  const onInput = ev => {
    setInput(ev.target.value)
  }

  const deleteItem = itm => {
    setTodos(todos.filter(el => el != itm))
  }

  const deleteList = () => {
    setTodos([])
  }

  const onSubmit = ev => {
    ev.preventDefault()

    // const out = todos.push(input)
    setTodos([...todos, input])
    setInput('')
  }

  return (
    <>
      <form onSubmit={onSubmit}>
        <input
          type="text"
          onInput={onInput}
          value={input}
          placeholder="Todo..."
          autoFocus="autofocus"
        />
        <button type="submit">Eingabe</button>
        <button onClick={deleteList}>CLEAR</button>
      </form>
      <ul>
        { todos.map(el => {
          return (
              <li>
                {el}
                <button onClick={() => deleteItem(el)}>DEL</button>
              </li>
          )
        }) }
      </ul>
    </>
  )
}


export default Todo

【问题讨论】：

您能否澄清一下，您是说deleteList 还是deleteItem 不起作用？
只需将“清除”按钮设置为type="button"。
deleteItem 正在工作。 deleteList 导致问题。
@Andy 哦，好的。我想我明白了。这是我的一个愚蠢的 HTML 错误。该按钮在调用deleteList 的同时触发提交，因此创建了一个带有空字符串的新列表条目？
是的，我想是的。

标签： javascript preact

【解决方案1】：

您的submit 函数会将input 添加到您的待办事项列表中，即使输入是一个空字符串。这就是为什么您的列表中有一个 DEL 按钮的原因。相反，检查输入是否为空，如果是，则返回。

  const onSubmit = ev => {
    ev.preventDefault();
    if(input === '') {
      return;
    }

    // const out = todos.push(input)
    setTodos([...todos, input])
    setInput('')
  }

【讨论】：