使用挂钩切换特定行

Question

toggleHidden(键(中的错误〔错误：应为0个参数，但得到1个〕。建议对特定行的顶部按键进行更正。

code

const [isOpen, setIsOpen] = React.useState(false);

const toggle=((=>setIsOpen(！isOpen(；

const[isHidden，setIsHidden]=React.useState(true(

const toggleHidden=((=>setIsHidden(！isHidden(

const data = [
{
"name": "gvf",
"email": "abc",
"companyname": "xyz",
"address": "abcy"
},
{
"name": "abi",
"email": "dhf",
"companyname": "dhd",
"address": "fhfh"

}

]

return (
<div>
<Row>
<Col> 
<table  className="table table-hover table-striped table-sm">
<thead className="thead-dark">
<tr>
<th>Name</th>
<th>Email</th>
<th>CompanyName</th>
<th>Address</th>

</tr>

</thead>    
<tbody>  

{data.map((a , key) => (

<tr key={key}>
<td><Button onClick = {toggleHidden}>Click</Button>
{!isHidden && <p>Hello ABIII</p> }
</td>    
<td>{a.name}</td>
<td>{a.email}</td>
<td>{a.address}</td>
<td>{a.companyname}</td>

</tr>

))}
</tbody>
</table>
</Col>

)}

Answer 1

只需将状态更改为数组并"pop"/"推"；键，然后声明一个接受键的curried处理程序，并执行正确的切换逻辑。我删除了isOpen状态，因为它在示例中没有使用，但您可以按照更改isHidden状态和切换开关的方式更改它：

const [ isHiddenList, setIsHiddenList ] = React.useState([])
const toggleHidden = key => () => {
setIsHiddenList(
isHiddenList.includes(key)
? isHiddenList.filter(existingKey => existingKey !== key)
: [ ...isHiddenList, key ]
);
};
const data = [
{
"key": "1"
"name": "gvf",
"email": "abc",
"companyname": "xyz",
"address": "abcy"
},
{
"key": "2"
"name": "abi",
"email": "dhf",
"companyname": "dhd",
"address": "fhfh"
}
]
return (
<div>
<Row>
<Col> 
<table  className="table table-hover table-striped table-sm">
<thead className="thead-dark">
<tr>
<th>Name</th>
<th>Email</th>
<th>CompanyName</th>
<th>Address</th>
</tr>
</thead>    
<tbody>  
{
data.map(({ key, name, email, companyname, address }) => {
const isHidden = isHiddenList.includes(key);
return (
<tr key={key}>
<td><Button onClick={toggleHidden(key)}>Click</Button>
{!isHidden && <p>Hello ABIII</p> }
</td>    
<td>{a.name}</td>
<td>{a.email}</td>
<td>{a.address}</td>
<td>{a.companyname}</td>
</tr>
);
})
}
</tbody>
</table>
</Col>
</Row>
</div>
)

免责声明-为了保持一致性，密钥应该是数据项的一部分，动态生成的迭代索引不能保证密钥被正确分配。