Javascript 如何更新父项'；使用新对象创建状态

尝试实现一个向我的ReactJS表中添加新值的函数

当我点击Formulario组件中的“地籍”按钮时，它应该向父组件发送一个新对象，并重新呈现表格行

我正在努力使这个应用程序工作，不明白为什么它不能正常工作

我的目标是，表应该保留它的旧值，并使用表单中的新值添加新行

单击按钮时出现准确错误：

父级组件：

import'/App.css'；
从“React”导入React，{useState}；
从“react bootstrap”导入{Table，Jumbotron，Button}
从“/Formulario”导入Formulario
从“/rendercadstros”导入rendercadstros
函数App（）{
const[Cadastros，setCadastros]=useState([{
“id”：1，
“诺姆”：“弗朗西斯卡·朱莉娅·达·科斯塔”，
“cpf”：“457.696.936-65”，
“rg”：“47.360.897-2”，
“数据”：“1944年3月23日”，
“sexo”：“Feminino”
},
{
“id”：2，
“诺姆”：“诺亚·菲利佩·席尔瓦”，
“cpf”：“956.531.431-70”，
“rg”：“40.974.782-8”，
“数据”：“1964年7月11日”，
“男性化”：“男性化”
},
{
“id”：3，
“nome”：“Alícia Ros–ngela Melo”，
“cpf”：“066.291.353-18”，
“rg”：“36.214.141-1”，
“数据”：“1978年2月18日”，
“sexo”：“Feminino”
}]) 
功能AtuanizarCadastro（novoCadastro）{
setCadastros（cadastrosAtuais=>{
返回[cadastrosAtuais，novoCadastro]
})
}
返回(
身份证件
诺姆
中央公积金
RG
纳西门托
性感
{Cadastros.map（renderCadastros）}
);
}
导出默认应用程序

setCadastros({'id': id, 'nome': nome, 'cpf': cpf, 'rg': rg, 'data_nasc': nascimento, 'sexo': sexo})

atualizarCadastros(novoCadastro)

novoCadastro包含一个旧的对象，因为它的值是在调用setCadastros之前读取的，所以您可以创建一个对象并将其传递给本地状态处理程序和父组件函数

const superNovoCadastro = {'id': id, 'nome': nome, 'cpf': cpf, 'rg': rg, 'data_nasc': nascimento, 'sexo': sexo}

setCadastros(superNovoCadastro)
atualizarCadastros(superNovoCadastro)

当你这样写的时候

setCadastros({'id': id, 'nome': nome, 'cpf': cpf, 'rg': rg, 'data_nasc': nascimento, 'sexo': sexo})

atualizarCadastros(novoCadastro)

novoCadastro包含一个旧的对象，因为它的值是在调用setCadastros之前读取的，所以您可以创建一个对象并将其传递给本地状态处理程序和父组件函数

const superNovoCadastro = {'id': id, 'nome': nome, 'cpf': cpf, 'rg': rg, 'data_nasc': nascimento, 'sexo': sexo}

setCadastros(superNovoCadastro)
atualizarCadastros(superNovoCadastro)

数组问题的返回数组
我认为这个函数应该很少修复

现在的功能是：

  function atualizarCadastros(novoCadastro){
    setCadastros(cadastrosAtuais => {
      return [cadastrosAtuais, novoCadastro]
    })
  }

当我们调用Atuanizarcadastros（{c:3}）时，
我们有地籍卫星=[{a:1}]

我们得到的新地籍是
[[{a:1}]，{c:3}]

但是我们想要得到
[{a:1}，{c:3}]

因此，我们可以使用扩展语法：

function atualizarCadastros(novoCadastro) {
  setCadastros(cadastrosAtuais => {
    return [...cadastrosAtuais, novoCadastro];
  })
}

或者最好使用concat：

function atualizarCadastros(novoCadastro) {
  setCadastros(cadastrosAtuais => {
    return cadastrosAtuais.concat(novoCadastro);
  })
}

数组问题的返回数组
我认为这个函数应该很少修复

现在的功能是：

  function atualizarCadastros(novoCadastro){
    setCadastros(cadastrosAtuais => {
      return [cadastrosAtuais, novoCadastro]
    })
  }

当我们调用Atuanizarcadastros（{c:3}）时，
我们有地籍卫星=[{a:1}]

我们得到的新地籍是
[[{a:1}]，{c:3}]

但是我们想要得到
[{a:1}，{c:3}]

因此，我们可以使用扩展语法：

function atualizarCadastros(novoCadastro) {
  setCadastros(cadastrosAtuais => {
    return [...cadastrosAtuais, novoCadastro];
  })
}

或者最好使用concat：

function atualizarCadastros(novoCadastro) {
  setCadastros(cadastrosAtuais => {
    return cadastrosAtuais.concat(novoCadastro);
  })
}

rendercadstros
不是一个组件，它只是一个函数。为什么不把它做成一个呢？我不知道如何把它做成一个组件，并在我的父级中调用它，它是{Cadastros.map（renderCadastros）}。对不起，我是初学者，RenderCadstros不是一个组件，它只是一个函数。为什么不把它做成一个呢？我不知道如何把它做成一个组件，并在我的父级中调用它，它是{Cadastros.map（renderCadastros）}。对不起，我是一个初学者，现在错误已经消失了，但我仍然有一个问题。设置新值后，表将添加一行空值，然后添加一行新值。但是，母国的旧价值观已经消失了，你知道这是为什么吗？我再次请求你原谅我的问题，我开始我的反应技巧。现在错误已经消失了，但我仍然有一个问题。设置新值后，表将添加一行空值，然后添加一行新值。但是，母国的旧价值观已经消失了，你知道这是为什么吗？我再次请求您原谅我的问题，我开始我的反应技巧。非常感谢您，它使我需要的修复。所以我想澄清一下：作为回报，[…地籍调查，新地籍调查]；“…”使所有值都位于一个数组中？使用.concat可以产生相同的结果，但它只是将以前的值转换为新值？再次感谢你！欢迎amm是的，“…”将阵列的itmes分散为一个信号（）concat返回新阵列。（）非常感谢，它解决了我需要的问题。所以我想澄清一下：作为回报，[…地籍调查，新地籍调查]；“…”使所有值都位于一个数组中？使用.concat可以产生相同的结果，但它只是将以前的值转换为新值？再次感谢你！欢迎amm是的，“…”将阵列的itmes分散为一个信号（）concat返回新阵列。()