react js中的JSX文件问题是什么?

Question

我想过滤每个任务(项目)，但我的代码不工作我的目的是当我点击每个div的时候div就会消失但是它不起作用

const { useState, Fragment } = React;
const tasks = [
{
id: 1,
title:
"sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
body: "quia et suscipitnsuscipit recusandae consequuntur expedita et cumnreprehenderit molestiae ut ut quas totamnnostrum rerum est autem sunt rem eveniet architecto",
},
{
id: 2,
title: "qui est esse",
body: "est rerum tempore vitaensequi sint nihil reprehenderit dolor beatae ea dolores nequenfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendisnqui aperiam non debitis possimus qui neque nisi nulla",
},
{
id: 3,
title: "ea molestias quasi exercitationem repellat qui ipsa sit aut",
body: "et iusto sed quo iurenvoluptatem occaecati omnis eligendi aut adnvoluptatem doloribus vel accusantium quis pariaturnmolestiae porro eius odio et labore et velit aut",
},
];
/*export default*/ function Tasks() {
const [initial_tasks, setTasks] = useState(tasks);
const onDelete = (id) => {
setTasks(initial_tasks.filter((task) => task.id !== id));
};
return (
<Fragment>
{tasks.map((task) => (
<div
style={{ border: "1px solid red" }}
onClick={() => {
onDelete(task.id);
}}
>
<h1>{task.id}</h1>
<p>{task.title}</p>
</div>
))}
</Fragment>
);
}
ReactDOM.createRoot(document.getElementById("root"))
.render(<Tasks />);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.0.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.0.0/umd/react-dom.development.js"></script>

Answer 1

你犯的错误在这里

1:你需要在地图中提到状态变量，这样当它改变时，它就会受到影响

2:不要过滤initial_tasks。setTask函数给你的是旧的值，所以要利用它

3:你需要在div中提供key prop，以便react知道哪个元素被更改了

import { useState } from "react";
const tasks = [
{
id: 1,
title:
"sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
body: "quia et suscipitnsuscipit recusandae consequuntur expedita et cumnreprehenderit molestiae ut ut quas totamnnostrum rerum est autem sunt rem eveniet architecto",
},
{
id: 2,
title: "qui est esse",
body: "est rerum tempore vitaensequi sint nihil reprehenderit dolor beatae ea dolores nequenfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendisnqui aperiam non debitis possimus qui neque nisi nulla",
},
{
id: 3,
title: "ea molestias quasi exercitationem repellat qui ipsa sit aut",
body: "et iusto sed quo iurenvoluptatem occaecati omnis eligendi aut adnvoluptatem doloribus vel accusantium quis pariaturnmolestiae porro eius odio et labore et velit aut",
},
];
export default function App() {
const [initial_tasks, setTasks] = useState(tasks);
const onDelete = (id) => {
setTasks(oldTasks => {
return oldTasks.filter((task) => task.id !== id)
});
};
return (
<>
{
initial_tasks.map((task) => (
<button key={task.id} style={{ border: "1px solid red" }} onClick={() => onDelete(task.id)} >
<h1>{task.id}</h1>
<p>{task.title}</p>
</button>
))
}
</>
);
}

Answer 2

任务变量没有附加到状态。你的任务变量是你在渲染中用来映射的。所以这意味着渲染之间的变化可能会丢失。你需要把你的数组赋值给一个状态。

const [taskList, setTaskList] = useState(tasks);

你需要确保你使用这个状态的getter作为你的映射的目标。所以taskList就是你需要映射的。

同样重要的是要记住不要直接改变状态数组。当你想向数组中添加新项时。你可能想写点什么taskList.push(newTask)

但这是不对的。从技术上讲，它可以工作，但它不会被标记为状态更新，并且在状态更新发生之前，订阅该状态的任何内容都不会使用新值进行更新。所以你应该复制状态，推入那个数组，然后再赋值回去。下面是一个例子

const addTask = (myTask) => {
//make a copy of the state
const state = [...taskList]
//push new task
state.push(myTask)
//assign new state
setTaskList(state)
}

在您的过滤示例中，这可能在单个单行设置状态

中完成。

setTaskList(prvState => prvState.filter(task => task.id !== someValue));

这个可以工作，因为filter返回一个新的数组，而不是原始数组的一个突变。