我正在嘗試實作可重用組件，其中資料將在特定組件的點擊功能上被洗掉。
但是單擊一個組件會洗掉另一個組件的資料，因為我對可重用組件使用了相同的資料。有一個更好的方法嗎？
我的 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;
我的 list.js 檔案
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;
uj5u.com熱心網友回復：
我的建議如下：
- 將資料傳遞給子組件后，將它們保留為本地狀態，然后清除該組件本地狀態上的資料。IE
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;
在子/入圍名單組件上：
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;
uj5u.com熱心網友回復：
您不能兩次創建此行：
<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
}
]);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/322550.html
標籤：javascript 反应
上一篇：jQuery：計算表中檢查的輸入