Question

toggleHidden（key）中的错误[错误：期望0 args但得到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” /“ push”键插入其中，然后声明一个接受键的咖喱处理程序，并执行适当的切换逻辑即可。我删除了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>
)

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

用钩子切换特定的行

1 个答案: