警告：React 检测到由 null 调用的 Hook 的顺序发生了变化答案

【问题标题】：Warning: React has detected a change in the order of Hooks called by null警告：React 检测到由 null 调用的 Hook 的顺序发生了变化
【发布时间】：2020-07-21 12:10:51
【问题描述】：

在表单提交时调用该函数。起初，它按预期工作，但是在表单提交上调用此函数时。我收到以下 error.index.js:1 警告：React 检测到由 null 调用的 Hook 的顺序发生了变化。如果不修复，这将导致错误和错误。欲了解更多信息，请阅读 Hooks 规则：

上一个渲染下一个渲染

useState 使用状态
未定义的使用状态

这里是代码示例：

function TablerowsAdd (  x,i,header,handleRemove, startEditing,editIdx,handleChange,stopEditing,handleRemoveField,fieldIdx,startEditingField,fieldheader) {
    
    const [open, setOpen] = useState(false);
    

    const currentlyEditing = editIdx === i;  
    
   
    return (
        <React.Fragment key={`tr-${i}`}>
        <TableRow key={`tr-${i}`}>           
            {header.map((y, k) => (
                <TableCell key={`trc-${k}`}>
                    {currentlyEditing ? (
                        <TextField
                            name={y.prop}
                            onChange={e => handleChange(e, y.prop, i)}
                            value={x[y.prop]}
                        />
                    ) : (
                            x[y.prop]
                        )}
                </TableCell>
            ))}
            <TableCell>                
                {currentlyEditing ? (
                    <CheckIcon onClick={() => stopEditing()} />
                ) : (
                        <EditIcon onClick={() => startEditing(i)} />
                    )}
                <DeleteIcon onClick={() => handleRemove(i)} />
                <IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}  >
                        {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
                    </IconButton>
            </TableCell>        
        </TableRow>
        
         <TableRow>
         <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
           <Collapse in={open} timeout="auto" unmountOnExit>
             <Box margin={1}>
               <Typography variant="h6" gutterBottom component="div">
                 Fields
               </Typography>
               <Table size="small" aria-label="purchases">
                 <TableHead>

                 <TableRow>
                        {fieldheader.map((x, i) => (
                            <TableCell key={`thc-${i}`}>{x.name}  </TableCell>
                        ))}
                      
                    </TableRow>
                 </TableHead>
                 <TableBody>
                     
                   {x.fields.map((fieldRow,y) => (
                     <TableRow key={`tr-${y}`}>
                       <TableCell>{fieldRow.bitname}</TableCell>
                         
                       
                       <TableCell>{fieldRow.bitmask}</TableCell>
                       <TableCell >{fieldRow.bitvalue}</TableCell>
                       <TableCell >{fieldRow.maskname}</TableCell>
                       <TableCell > {fieldRow.doc} </TableCell>
                       <TableCell > 
                     
                        <DeleteIcon    onClick={() => handleRemoveField(i,fieldRow.bitname,y)} /> </TableCell>              

                     </TableRow>
                   ))}
                   
                 </TableBody>
               </Table>
             </Box>
           </Collapse>
         </TableCell>
       </TableRow>
       </React.Fragment>
    ); };

【问题讨论】：

你找到解决方案了吗？

标签： reactjs

【解决方案1】：

如果TablerowsAdd 的调用次数发生变化，useState 的调用次数也会发生变化。尝试使用组件：<TablerowsAdd/> 而不是方法调用：TablerowsAdd()。这样useState 每个组件只调用一次

【讨论】：

上一个渲染 下一个渲染

上一个渲染下一个渲染