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

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

所以现在问题:

在子组件上，我无法简单地回声 props 值。这是我的代码：

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;

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

React state passed as prop to child component not showing

javascript

reactjs

react-props

react-state