React中如何在onClick点击事件中同时执行两个操作更新两个state

现有代码存在的问题 #

• 重复定义了setIdColab函数：调用useState时已经返回了官方的state更新函数，你自定义的版本直接修改state变量不符合React的更新规范，不会触发组件重渲染
• 点击事件绑定错误：onClick={exibirForm(id)}会在组件渲染阶段直接执行函数，不是点击按钮时才触发
• exibirForm没有同步更新idColab的逻辑

修正步骤 #

1. 删掉你自定义的setIdColab函数，直接改造exibirForm支持接收id参数，同步更新两个state
2. 修改按钮的点击事件绑定，用箭头函数包裹避免渲染时直接触发执行
3. 建议把按钮的type="submit"改成type="button"，避免放在form标签内时意外触发表单提交

修正后完整代码 #

state与处理函数部分 #

const [editForm, setEditForm] = useState(false)
const [idColab, setIdColab] = useState("")

const exibirForm = (id) => {
  setIdColab(id)
  // 点击编辑默认打开表单，不需要取反可以直接设为true，需要切换效果就用下一行的写法
  setEditForm(true)
  // setEditForm(prevState => !prevState)
}

表格渲染部分 #

const renderTable = () => {
  return data.map((colaborador, idx) => {
    const {id, nome, matricula, funcao, tipo_acesso, cpf} = colaborador
    // 注意这里你原来代码里的newFuncao、newAcesso要自己保证是定义过的
    return (
      <tr key={idx}>
        <td className='data-cell'>{nome}</td>
        <td className='data-cell'>{matricula}</td>
        <td className='data-cell'>{newFuncao}</td>
        <td className='data-cell'>{newAcesso}</td>
        <td className='data-cell'>{cpf}</td>
        <td className='data-cell'>{id}</td>
        <td className='btn-cell'>
          <input 
            className="edit-btn" 
            type="button" 
            value="Editar" 
            onClick={() => exibirForm(id)} 
          />
        </td>
      </tr>
    ) 
  })
}

如果关闭编辑表单时需要清空id值，在关闭逻辑里加上setIdColab("")即可。

内容的提问来源于stack exchange，提问作者Thiago Salgado