如何在 React 中删除部分 html答案

【问题标题】：How to remove a part of html on live in React如何在 React 中删除部分 html
【发布时间】：2020-10-25 10:53:04
【问题描述】：

我的 react 应用中有组件，第一：

const App = () => {

  const [tasks, setTasks] = useState([])

  useEffect(() =>{
    getTasks(data => setTasks(data))
  }, [])


  const onNewTask = task => {
    setTasks(prev => ([
      ...prev,
      task
    ]))
  }

  const onRemoveTask = () => {
    setTasks(prev => ([
      ...prev,
    ]))
  }

  
  return (
    <>
    <NewTask add={onNewTask}/>
    <Task tasks={tasks} remove={onRemoveTask}/>,
    </>
  )
}

这个组件渲染了两个子组件：在 comp newTask 中有一个方法，用户可以添加一个新任务，方法：

const addNewTask = e => {
    e.preventDefault();
    fetch(`${API_URL}/tasks`, {
        method: 'POST',
        headers: {
            Authorization: API_KEY,
            "Content-Type": "application/json"
        },
        body: JSON.stringify(inputs)
    })
    .then(response => response.json())
    .then(data => add(data.data))
    .catch(e => console.warn(e))
}

它工作正常，用户添加了一个任务，它会自动出现在 HTML 中，这要归功于 App 组件中的 onNewTask 方法。

我的问题是类似的，但在删除任务的情况下，我在任务组件中有一个方法：

const handleDeleteTask = e => {
    e.preventDefault();
    const taskToRemove = e.target.id;
    console.log(taskToRemove)
    taskToRemove ? 
    fetch(`${API_URL}/tasks/${taskToRemove}`, {
        method: 'DELETE',
        headers: {
            Authorization: API_KEY,
            "Content-Type": "application/json",
        },
    })
    .then(remove())
    .catch(err => console.warn(err))
    :
    console.log('Error')
}

它删除了一个任务，但用户需要刷新页面才能使该任务从 HTML 中消失。我知道我的方法不正确。谁能告诉我怎么做？

提前致谢。

【问题讨论】：

标签： javascript reactjs api fetch

【解决方案1】：

您需要更新任务数组并在 setTasks 中进行设置。

const onRemoveTask = (id) => {
    const newTaskList = tasks.filter(item.id != id)
    setTasks(newTaskList)

}

【讨论】：

它几乎可以工作。 newTaskList 应该看起来像：tasks.filter(item => item.id !== id)