我有這個陣列，它是由我通過 jsx 映射的字串形成的，我希望每當單擊特定元素時通過從陣列中洗掉來消失。
我嘗試通過使用來實作這一點，slice()但我做錯了，如果你能幫助我，我將不勝感激。
這就是我試圖接近它的方式。
export default function App() {
const arr = ['string1', 'string2', 'string3', 'string4', 'string5', 'string6']
const removeMe = (index) => {
if(index > -1) {
arr.slice(index, 1);
}
return arr;
}
return (
<div className="App">
{arr.map((string, index) => (
<button
key={`string${index}`}
onClick={() => removeMe(index)}
>
{string}
</button>
))}
</div>
);
}
此外，如果有幫助，這里是一個codeSandBox 。
uj5u.com熱心網友回復：
為此，您必須使用 useState 掛鉤。參考這個鏈接。它有一個與您的代碼相似的示例。
https://reactjs.org/docs/hooks-state.html
要重新渲染組件狀態或道具必須 change.useState 掛鉤用于更改狀態。
uj5u.com熱心網友回復：
首先，你需要一個陣列的狀態（使用useState 鉤子），以便 React 能夠在狀態發生變化時重新渲染，所以你需要添加以下行：
const [arr, setArr] = React.useState(['string1', 'string2', 'string3', 'string4', 'string5', 'string6'])
關于洗掉問題：
多種解決方案是可能的。重要的是始終回傳一個新的陣列實體：
- 利用
filter()
const removeMe = (index) => setArr(arr.filter((_, i) => i !== index));
- 使用拼接（）
const removeMe = (index) => {
const temp = [...arr]
temp.splice(index, 1)
setArr(temp)
}
您的組件可能如下所示：
function App() {
const [arr, setArr] = React.useState(['string1', 'string2', 'string3', 'string4', 'string5', 'string6'])
const removeMe = (index) => setArr(arr.filter((_, i) => i !== index));
return (
<div className="App">
{arr.map((string, index) => (
<button
key={`string${index}`}
onClick={() => removeMe(index)}
>
{string}
</button>
))}
</div>
);
}
ReactDOM.render(<App/>, document.getElementById('root'));<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<div id="root"></div>uj5u.com熱心網友回復：
干得好。使用 React 狀態和相應的設定器來覆寫修改后的陣列值。
還要注意箭頭函式與隱式回傳的用法。
import { useState } from 'react'
export default function App () {
const [arr, setArray] = useState([
'string1',
'string2',
'string3',
'string4',
'string5',
'string6'
])
const removeMe = index => setArray(arr.filter((_, i) => i !== index))
return (
<div className='App'>
{arr.map((string, index) => (
<button key={`string${index}`} onClick={() => removeMe(index)}>
{string}
</button>
))}
</div>
)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/508169.html
標籤：javascript 反应 数组