在反应中删除地图中数组中的元素
removing an element in array within map in react
单击 span 时,我想从数组中删除该元素并再次 运行 地图,以便 span 也被删除。我不知道是语法错误还是什么。这是我编写代码的沙箱 link。 https://codesandbox.io/s/angry-wu-4dd11?file=/src/App.js
import "./styles.css";
export default function App() {
const data = [{
name: "Alex",
},
{
name: "John",
},
{
name: "Leo",
},
{
name: "Murphy",
},
{
name: "Alex",
},
{
name: "John",
},
{
name: "Leo",
},
{
name: "Murphy",
},
];
return ( <
div className = "App" > {
data.map(function(val, id) {
return ( <
span key = {
id
}
className = "select__item"
onClick = {
(e) => {
data.splice(data.indexOf(val), id + 1);
console.log(data);
}
} >
{
val.name
} < br / > < br / >
<
/span>
);
})
} <
/div>
);
}
在这种情况下你应该使用 useState
钩子,因为 React 不会自动重新渲染。你必须告诉外部反应,一种方法是改变状态,反应会自动重新渲染组件:
现场演示
import { useState } from "react";
import "./styles.css";
export default function App() {
const [data, setData] = useState([
{
name: "Alex",
},
{
name: "John",
},
{
name: "Leo",
},
{
name: "Murphy",
},
{
name: "Alex",
},
{
name: "John",
},
{
name: "Leo",
},
{
name: "Murphy",
},
]);
const removeItem = (index) => {
setData(data.filter((o, i) => index !== i));
};
return (
<div className="App">
{data.map(function (val, id) {
return (
<span
key={id}
className="select__item"
onClick={() => removeItem(id)}>
{val.name} <br />
<br />
</span>
);
})}
</div>
);
}
function handleRemove(id) {
// this work for me
const newList = this.state.newList.filter((item) => item.id !== id);
this.setState({newList});
}
单击 span 时,我想从数组中删除该元素并再次 运行 地图,以便 span 也被删除。我不知道是语法错误还是什么。这是我编写代码的沙箱 link。 https://codesandbox.io/s/angry-wu-4dd11?file=/src/App.js
import "./styles.css";
export default function App() {
const data = [{
name: "Alex",
},
{
name: "John",
},
{
name: "Leo",
},
{
name: "Murphy",
},
{
name: "Alex",
},
{
name: "John",
},
{
name: "Leo",
},
{
name: "Murphy",
},
];
return ( <
div className = "App" > {
data.map(function(val, id) {
return ( <
span key = {
id
}
className = "select__item"
onClick = {
(e) => {
data.splice(data.indexOf(val), id + 1);
console.log(data);
}
} >
{
val.name
} < br / > < br / >
<
/span>
);
})
} <
/div>
);
}
在这种情况下你应该使用 useState
钩子,因为 React 不会自动重新渲染。你必须告诉外部反应,一种方法是改变状态,反应会自动重新渲染组件:
现场演示
import { useState } from "react";
import "./styles.css";
export default function App() {
const [data, setData] = useState([
{
name: "Alex",
},
{
name: "John",
},
{
name: "Leo",
},
{
name: "Murphy",
},
{
name: "Alex",
},
{
name: "John",
},
{
name: "Leo",
},
{
name: "Murphy",
},
]);
const removeItem = (index) => {
setData(data.filter((o, i) => index !== i));
};
return (
<div className="App">
{data.map(function (val, id) {
return (
<span
key={id}
className="select__item"
onClick={() => removeItem(id)}>
{val.name} <br />
<br />
</span>
);
})}
</div>
);
}
function handleRemove(id) {
// this work for me
const newList = this.state.newList.filter((item) => item.id !== id);
this.setState({newList});
}