使用相同数据和onclick函数的Reactjs可重用组件

Question

我正在尝试实现可重用的组件，其中数据将在特定组件的单击功能上被删除。

但是单击一个组件会删除另一个组件的数据，因为我正在为可重用组件使用相同的数据。有更好的方法吗?

我的app.js文件

import React from 'react';
import './App.css';
import ShotList from "./List"
function App() {
const [data,setData] = React.useState([
{
name1:"asdsad",
key: 0
},
{
name1:"asdrsad",
key: 1
},
{
name1:"asdrsad",
key: 2
}
]);
const removeData = (index) => {
setData(data.filter((value) => value.key !== index))
}

return (
<div className="App">
<ShotList data={data} removeData={removeData}></ShotList>
<ShotList data={data} removeData={removeData}></ShotList>
</div>
);
}
export default App;

my list.js file

import React from "react";
const ShotList = (data) => {
console.log(data)
return (
<>
{data.data.map((value,key) => (
<p onClick={() => {console.log(key);data.removeData(key)}} key={key}>{value.name1}</p>
))}
<p>123</p>
</>
);
};
export default ShotList;

Answer 1

我的建议如下:

• 一旦您将数据传递给子组件，请将它们维护为本地状态，然后清除该组件本地状态中的数据。即

import React from 'react';
import './App.css';
import ShotList from "./List"
function App() {
const [data,setData] = React.useState([
{
name1:"asdsad",
key: 0
},
{
name1:"asdrsad",
key: 1
},
{
name1:"asdrsad",
key: 2
}
]);

return (
<div className="App">
<ShotList data={data}></ShotList>
<ShotList data={data}></ShotList>
</div>
);
}
export default App;

在子/Shortlist组件上:

import React from "react";
const ShotList = (data) => {
const [localData, setLocalData] = useState(data)
const removeData = (index) => {
setLocalData(localData.filter((value) => value.key !== index))
}

return (
<>
{localData.map((value,key) => (
<p onClick={() => {console.log(key);removeData(key)}} key={key}>{value.name1}</p>
))}
<p>123</p>
</>
);
};
export default ShotList;

Answer 2

一行不能写两次:

<ShotList data={data} removeData={removeData}></ShotList>
<ShotList data={data} removeData={removeData}></ShotList>

因为它会渲染你的data两次，因为.map里面的元素会有相同的key，所以删除其中一个也会删除所有具有相同key值的元素。

如果你想有更多的元素，只需在datastate中添加新的元素，如:

const [data,setData] = React.useState([
{
name1:"asdsad",
key: 0
},
{
name1:"asdrsad",
key: 1
},
{
name1:"asdrsad",
key: 2
},
{
name1:"new one",
key: 3
},
{
name1:"fourth one",
key: 4
},
{
name1:"fifth one",
key: 5
}
]);