Блог

Я создал состояние с помощью перехватов. Затем использовал перехват, чтобы изменить его значение из другого компонента. Затем я отправляю это состояние третьему компоненту, который получает его в соответствии с инструментами разработчика Chrome, но я НЕ МОГУ ЕГО ПОКАЗАТЬ! Я схожу с ума?

Создайте состояние

 //Paso en el que estoy del stepper
let [stepper, modificarStepper] = useState({
    step: 1,
    datosFormCliente:{
        nombreCliente:'',
        apellidoCliente:'',
        cuitCliente:'',
        dir:'',
        trabajaEn:'',
        cel: 0,
    },
    urlPagare:'',
    urlBoletaSueldo:''
});
let {step, datosFormCliente} = stepper;
  

Я не показываю, как я изменяю состояние, потому что я знаю, что это сделано правильно, используя его хук: я изменяю содержимое stepper.datosFormCliente.
Затем я передаю его дочернему компоненту:

 <ControlarDatos
  datosFormCliente={datosFormCliente}
  clickPasoStepper={clickPasoStepper}
/>
  

Затем над компонентом ControlarDatos отображаются инструменты разработчика Chrome: https://ibb.co/Vxm1Mvv

Итак, теперь ВОПРОС:

Через дочерний компонент я не могу просто повторить значения реквизита. Вот мой код:

 import React, { Fragment } from "react";

const ControlarDatos = (datosFormCliente) => {
  const {
    nombreCliente,
    apellidoCliente,
    cuitCliente,
    dir,
    trabajaEn,
    cel,
  } = datosFormCliente;

  return (
    <Fragment>
      <div className="alert alert-danger" role="alert">
        <h4 className="alert-heading">Controlar datos y confirmar venta</h4>
        <p>
          Ya casi terminas, solo tenés que controlar los datos del comprador y
          confirmar la venta:
        </p>
        <hr />
        <p>Nombres: {nombreCliente} </p>
        <p>Apellidos: {apellidoCliente} </p>
        <p className="mb-0"></p>
        <hr />
        <button className="btn btn-danger">Confirmar venta!</button>
      </div>
      {nombreCliente}
    </Fragment>
  );
};

export default ControlarDatos;
  

Консоль не выдает ошибок. Проект компилируется. Тем не менее, не удается отобразить эти значения.

Это потому, что вы не разрушаете datosFormCliente prop, а вместо этого называете props as datosFormCliente . Итак, это не ваш datosFormCliente prop, это props объект.

Вместо этого используйте:

 const ControlarDatos = ({ datosFormCliente }) => {
  

ответ @devserkan правильный.

Также просто небольшое улучшение, вам не нужно использовать Fragment . Вместо этого вы можете просто использовать <> ... </> .
Это то же самое.

Так что это будет так:

 import React from 'react';

const ControlarDatos = ({ datosFormCliente }) => {

const {
  nombreCliente,
  apellidoCliente,
  cuitCliente,
  dir,
  trabajaEn,
  cel
} = datosFormCliente;

  return ( 
    <>
      <div className="alert alert-danger" role="alert">
        <h4 className="alert-heading">Controlar datos y confirmar venta</h4>
        <p>Ya casi terminas, solo tenés que controlar los datos del comprador y confirmar la venta:</p>
        <hr/>
        <p>Nombres: {nombreCliente} </p>
        <p>Apellidos: {apellidoCliente} </p>
        <p className="mb-0"></p>
        <hr/>
        <button className="btn btn-danger">Confirmar venta!</button>
      </div>
      {nombreCliente}
    </>
  );
}

export default ControlarDatos;