反應狀態作為道具傳遞給子組件未顯示

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;