反应状态作为道具传递给子组件未显示

Question

我用钩子创建了一个状态。 然后，使用钩子从不同的组件修改它的值。 然后我将该状态发送到第三个组件，该组件根据 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

所以现在问题是：

在子组件上，我无法简单地 ECHO 道具值。 这是我的代码：

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;

控制台没有给我任何错误。 项目编译。 仍然无法回显这些值。

Answer 1

这是因为您没有解构datosFormCliente道具，而是将props命名为datosFormCliente 。 因此，它不是您的datosFormCliente道具，而是props对象。

而是使用：

const ControlarDatos = ({ datosFormCliente }) => {

Answer 2

@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;