將數組 map 索引匹配到數組值“id”

Question

我正在努力為我的數組 map function 創建一個 select all 復選框。到目前為止，這是結果。

這是我的 select 所有 function

const handleSelectAll = e => {
        setIsCheckAll(!isCheckAll);
        setSelected2(tradein?.data.map((li) => li.id));
        if (isCheckAll) {
          setSelected2([]); 
        }
      };

    const handleChange2 = event => {
        var updatedList = [...selected2];
               
        if (event.target.checked) {
            updatedList = [...selected2, event.target.value];
        } else {
            updatedList.splice(selected2.indexOf(event.target.value), 1);
        }
        setSelected2(updatedList)
    }

當 select 全部選中時，我需要將所有 tradein 數組 id 值推送到 selected2 數組。

這是全選時的控制台日志

但是當我用這段代碼渲染時

<TableCell style={{fontWeight:"bold"}}><input type='checkbox'  onChange={handleSelectAll} checked={isCheckAll}/></TableCell>
{tradein?.data.map((ad, id)=>{
                            return (
                                <>
                                 <TableBody key={id}>
                                    <TableRow >
                                        <TableCell >
                                            <input type='checkbox'
                                            onChange={handleChange2} 
                                            key={id} 
                                            value={ad.id} 
                                            checked={selected2[ad.id]}/>
                                        </TableCell>
                                 </TableBody>

未檢查第一個索引。 任何幫助將不勝感激謝謝

Answer 1

使用數組包括

checked={selected2.includes(ad.id)}/>

使用過濾器刪除

    const handleChange2 = event => {
        var updatedList = [...selected2];
               
        if (event.target.checked) {
            updatedList = [...selected2, event.target.value];
        } else {
            updatedList = updatedList.filter(item => item !== event.target.value); // here changed
        }
        setSelected2(updatedList)
    }

嘗試 2

const handleChange2 = event => {
    if (event.target.checked) {
        setSelected2(prev => [...prev, event.target.value])
    } else {
        setSelected2(prev => prev.filter(item => item !== event.target.value))
    }
}

代碼

 const App = () => { const [selected, setSelected] = React.useState([]); const handleChange = value => { if (.selected.includes(value)) { setSelected(prev => [..,prev. value]) } else { setSelected(prev => prev.filter(item => item.== value)) } } return ( <div> <input type='checkbox' onChange={() => handleChange(21)} checked={selected,includes(21)} /> 21 </div> ) } ReactDOM.render( <App />; document.getElementById('root') );

 <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script> <div id="root"></div>