Update with C# and React [closed]

I need to update my database using C# in the back-end and React in front-end.

Back-end

[HttpPost("update")]
[ProducesResponseType(StatusCodes.Status200OK)]
[ProducesResponseType(StatusCodes.Status400BadRequest)]
[ProducesResponseType(StatusCodes.Status401Unauthorized)]
[ProducesResponseType(StatusCodes.Status404NotFound)]
public async Task<Resultado<Analise>> AnaliseAsync([FromBody] Analise analise)

{
    _telemetria.AdicionarPropriedade("NomeUsuario", _login);
    _telemetria.EscreverTelemetria(GetType().Name, "Atualizar análise", TipoSeveridade.Informacao);

    if (analise == null)
    {
        return Resultado<Analise>.AdicionarErro(
          null,
          CreditOn.Dominio.Enums.StatusCode.Status400BadRequest,
          "Dados inválidos."
        );
    }

    var resultado = await _servicoAnalise.AtualizarAnalise(analise.AnaliseId, _login);

    if (resultado.Erro)
    {
        return Resultado<Analise>.AdicionarErro(
          null,
          resultado.StatusCode,
          resultado.Erros
        );
    }

    _telemetria.EscreverTelemetria(
      "AtualizarAnálise",
      "Análise atualizada com sucesso.",
      TipoSeveridade.Informacao,
      propriedades: new Dictionary<string, object> { { "ID_Analise", analise.AnaliseId } }
    );
    return Resultado<Analise>.AdicionarSucesso(analise);
}```


**Front-end**


interface EditableTableProps {
    resultado: Resultado[];
    onUpdate: (updatedData: Resultado[]) => void;
}


const EditableTable = ({ resultado, onUpdate }: EditableTableProps) => {
    const [data, setData] = useState<Resultado[]>(Array.isArray(resultado) ? resultado : []);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState<string | null>(null);
    

    console.log('Análise:', data)
    

    const handleInputChange = (
        e: React.ChangeEvent<HTMLInputElement>,
        field: string,
        itemId: string
    ) => {
        const updatedData = data.map((analise) => ({
            ...analise,
            analiseDemonstrativo: analise.analiseDemonstrativo?.map((item) =>
                item.analiseDemonstrativoId === itemId
                    ? { ...item, [field]: e.target.value }
                    : item
            ) || [],
        }));
    
        setData(updatedData);
        onUpdate(updatedData);
    };
    console.log('resultado:', resultado)
    console.log('result:', result)
    const handleSave = async () => {
        setLoading(true);
        setError(null);
    
        try {
            const payload = {
                analiseId: analiseId, // Adicionar o analiseId aqui
                analises: data.map((analise) => ({
                    analiseId: analise.analiseId,
                    analiseDemonstrativo: analise.analiseDemonstrativo?.map((item) => ({
                        analiseDemonstrativoId: item.analiseDemonstrativoId,
                        tipoParametro: item.tipoParametro,
                        valor: item.valor,
                        // Adicione outros campos necessários aqui
                    })) || [],
                })),
            };
            
            console.log('payload:', JSON.stringify(payload, null, 2));
    
            const response = await axios.post(
                'https://localhost:7116/analise/update',
                payload,
                { headers: { 
                    'Authorization': `Bearer ${token}`,
                    'Content-Type': 'application/json' 
                } }
            );
    
            console.log('Dados enviados com sucesso:', response.data);
            setResult(response.data.valor || []);
            alert('Dados atualizados com sucesso!');
        } catch (err) {
            console.error('Erro ao atualizar dados:', err);
            setError('Ocorreu um erro ao enviar os dados. Verifique os valores e tente novamente.');
            
        } finally {
            setLoading(false);
        }
    };
    
    return (
        <div>
            <table style={{ width: '100%', border: '1px solid black', borderCollapse: 'collapse' }}>
                <thead>
                    <tr>
                        <th style={{ border: '1px solid black', padding: '8px' }}>Tipo Parâmetro</th>
                        <th style={{ border: '1px solid black', padding: '8px' }}>Valor</th>
                    </tr>
                </thead>
                <tbody>
                {data.map((analise) =>
                    analise.analiseDemonstrativo?.map((item: any) => (
                        <tr key={item.analiseDemonstrativoId}>

                            <td style={{ border: '1px solid black', padding: '8px' }}>
                                <input
                                    type="number"
                                    value={item.tipoParametro}
                                    onChange={(e) => handleInputChange(e, 'tipoParametro', item.analiseDemonstrativoId)}
                                    style={{ width: '100%' }} />
                            </td>

                            <td style={{ border: '1px solid black', padding: '8px' }}>
                                <input
                                    type="number"
                                    value={item.valor}
                                    onChange={(e) => handleInputChange(e, 'valor', item.analiseDemonstrativoId)}
                                    style={{ width: '100%' }} />
                            </td>

                        </tr>
                    )) || []
                )}
                </tbody>
            </table>

            {/* Botão de envio */}
            <button
                onClick={handleSave}
                style={{
                    marginTop: '10px',
                    padding: '8px 16px',
                    backgroundColor: '#4CAF50',
                    color: 'white',
                    border: 'none',
                    cursor: 'pointer',
                }}
                disabled={loading}
            >
                {loading ? 'Salvando...' : 'Salvar Alterações'}
            </button>

            {/* Feedback de erro */}
            {error && <p style={{ color: 'red' }}>{error}</p>}
        </div>
    );
};

const TableAnalysis: React.FC<{ resultado: any[] }> = ({ resultado }) => {
    if (!resultado || resultado.length === 0) {
        return <p>Nenhum dado encontrado.</p>;
    }

    const handleUpdate = (updatedData: Resultado[]) => {
        // Atualize o estado ou faça algo com os dados atualizados
        console.log('Dados atualizados:', updatedData);
    };

    return <EditableTable resultado={resultado} onUpdate={handleUpdate} />;
};

    const handleUpdate = (updatedData: Resultado[]) => {
        setResult(updatedData);
    };

    if (!pdfUrl) {
        return <p>Carregando ou URL do PDF não encontrada.</p>;
    }

    return (
        <Container>
            <main>
                <div className="Container1">
                    <h1>Page</h1>
                    
                    <div className="row">
                        <div className="col1">
                            <h1>Visualização do PDF</h1>
                           <VisualizationPage pdfUrl={pdfUrl} />
                            <PdfButton url="https://extratordev.blob.core.windows.net/95e6b155-8152-4c3c-8430-bef3333be2aa/07486111-c9fe-44ce-a5df-707985b7d2f7-Balanco_Patrimonial_2022-CostaSul.pdf" label="Abrir PDF 1" onClick={setPdfUrl} />
                            <PdfButton url="https://cdn.filestackcontent.com/wcrjf9qPTCKXV3hMXDwK" label="Abrir PDF 2" onClick={setPdfUrl} />
                            <PdfButton url="./Costa_Sul.pdf" label="Abrir PDF 3" onClick={setPdfUrl} /> 
                        </div>
                        <div className="col2">
                            <h2>Indicadores</h2>
                            <div className="Indicators">
                                <h2>Análise Demonstrativa</h2>
                                <TableAnalysis
                                    resultado={(result || [])}
                                />

                            </div>
                            <MyButton />
                        </div>
                    </div>
                </div>
            </main>
        </Container>
    );
};

My payload in the console

payload: {
  "analiseId": "30d972df-9f8f-491c-8e****",
  "analises": [
    {
      "analiseId": "30d972df-9f8f-491***",
      "analiseDemonstrativo": [
        {
          "analiseDemonstrativoId": "45b93269-e007-4f23-a04***",
          "tipoParametro": "2",
          "valor": 30000
        }
      ]
    }
  ]
}

I got data updated with success:

{statusCode: 200, erro: false, erros: Array(0), valor: {…}}
erro
:
false
erros
:
[]
statusCode
:
200
valor
:
{analiseId: ’30d972df-9f8f-491c-8e76-fdae76eeac2c’, cnpjOuCpf: null, statusId: ‘00000000-0000-0000-0000-000000000000’, tipoAnalise: 0, observacao: null, …}
[[Prototype]]
:
Object

An the empty result like this:

analiseCliente
:
[]
analiseCredito
:
[]
analiseCriterio
:
[]
analiseDemonstrativo
:
[]
analiseDocumentacao
:
[]
analiseEmpresa
:
[]
analiseId
:
“30d972df-9f8f-491c-8e76-fdae76eeac2c”
analiseIndicador
:
[]
analiseMensagem
:
[]
analiseMetadado
:
[]
analisePorte
:
[]
analiseSociedade
:
[]
classificacaoInterna
:
null
cnpjMatriz
:
null
cnpjOuCpf
:
null
dataEdicao
:
“0001-01-01T00:00:00”
dataInclusao
:
“0001-01-01T00:00:00”
nomeAssessor
:
null
observacao
:
null
parecer
:
null
parecerComercial
:
null
status
:
null
statusId
:
“00000000-0000-0000-0000-000000000000”
tipoAnalise
:
0
usuarioEdicao
:
null
usuarioInclusao
:
null
valorSolicitado
:
0
[[Prototype]]
:
Object