如何使用新对象更新父对象的状态

Question

尝试实现一个函数，为我的ReactJS表添加一个新值。

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

我真的很努力让这个应用程序工作，不知道为什么它不能正常工作。

我的目标是，表应该保持它的旧值添加新行与新值的形式。

当我点击按钮的确切错误:https://i.stack.imgur.com/vpT2u.jpg

父母的组件:

import './App.css';
import React, {useState} from 'react';
import {Table, Jumbotron, Button} from 'react-bootstrap'
import Formulario from './Formulario'
import renderCadastros from './renderCadastros'
function App() {

const [Cadastros, setCadastros] = useState([{
"id": 1,
"nome": "Francisca Julia da Costa",
"cpf": "457.696.936-65",
"rg": "47.360.897-2",
"data_nasc": "23/03/1944",
"sexo": "Feminino"
},
{
"id": 2,
"nome": "Noah Felipe Silva",
"cpf": "956.531.431-70",
"rg": "40.974.782-8",
"data_nasc": "11/07/1964",
"sexo": "Masculino"
},
{
"id": 3,
"nome": "Alícia Rosângela Melo",
"cpf": "066.291.353-18",
"rg": "36.214.141-1",
"data_nasc": "18/02/1978",
"sexo": "Feminino"
}]) 

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

<Jumbotron style={{background: 'transparent'}}> 

<Formulario atualizarCadastros={atualizarCadastros} />
<Table striped bordered hover size='sm'>
<thead>
<tr>
<th>id</th>
<th>Nome</th>
<th>CPF</th>
<th>RG</th>
<th>Nascimento</th>
<th>Sexo</th>
<th></th>
</tr>
</thead>
<tbody>
{Cadastros.map(renderCadastros)}
</tbody>
</Table>
</Jumbotron>

);
}
export default App;

基于其父状态创建表行的组件:

import './App.css';
import React from 'react';
import {Button} from 'react-bootstrap'
function renderCadastros(cadastro, index){
return(
<tr id={cadastro.id} key={index}>
<td>{cadastro.id}</td>
<td contentEditable="true" suppressContentEditableWarning={true}>{cadastro.nome}</td>
<td contentEditable="true" suppressContentEditableWarning={true}>{cadastro.cpf}</td>
<td contentEditable="true" suppressContentEditableWarning={true}>{cadastro.rg}</td>
<td contentEditable="true" suppressContentEditableWarning={true}>{cadastro.data_nasc}</td>
<td contentEditable="true" suppressContentEditableWarning={true}>{cadastro.sexo}</td>
<td align="center"><Button variant="danger">Excluir</Button></td>
</tr>)
}
export default renderCadastros

创建表单的组件，并具有向其父状态添加新值的功能:

import './App.css';
import React, {useState, useRef} from 'react';
import {Button, Form, Col} from 'react-bootstrap'
function Formulario ({atualizarCadastros}){
const [novoCadastro, setCadastros] = useState()

const refId = useRef()
const refNome = useRef()
const refCpf = useRef()
const refRg = useRef()
const refNascimento = useRef()
const refSexo = useRef()
function registrarCadastros(){
const id = refId.current.value
const nome = refNome.current.value
const cpf = refCpf.current.value
const rg = refRg.current.value
const nascimento = refNascimento.current.value
const sexo = refSexo.current.value
setCadastros({'id': id, 'nome': nome, 'cpf': cpf, 'rg': rg, 'data_nasc': nascimento, 'sexo': sexo})
atualizarCadastros(novoCadastro)
}
return(
<div>
<Form>
<Form.Row>
<Col>
<Form.Label>Identificação</Form.Label>
<Form.Control ref={refId} placeholder="Id" />
</Col>
<Col>
<Form.Label>Nome Completo</Form.Label>
<Form.Control ref={refNome} placeholder="João Silva" />
</Col>
<Col>
<Form.Label>CPF</Form.Label>
<Form.Control ref={refCpf} placeholder="000.000.000-00" />
</Col>
<Col>
<Form.Label>RG</Form.Label>
<Form.Control ref={refRg} placeholder="0.000.000" />
</Col>
<Col>
<Form.Label>Data de Nascimento</Form.Label>
<Form.Control ref={refNascimento} placeholder="DD/MM/AAAA" />
</Col>
<Col>
<Form.Label>Sexo</Form.Label>
<Form.Control ref={refSexo} placeholder="Masculino/Feminino" />
</Col>
</Form.Row>
</Form>
<div  style={{display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
<Button onClick={registrarCadastros} style={{margin: '10px'}} variant="primary">Cadastrar</Button>
</div> 
</div>
)  
}
export default Formulario

Answer 1

返回数组问题

我认为这个功能应该稍微修复一下。

当前函数:

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

调用atalizarcadastros ({c: 3})时，我们有cadastrosAtuais = [{a: 1}]

我们得到新的Cadastros作为[[{ 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);
})
}

Answer 2

当你这样写

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)