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

现在，问题：

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

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

这是因为您没有破坏[tox] # ... [testenv] deps = pytest # omit "{distshare}/pandas-ml-common-*.zip" commands_pre = python -m pip install {distshare}/pandas-ml-common-*.zip # ...道具，而是将datosFormCliente命名为props。因此，它不是您的datosFormCliente道具，而是datosFormCliente对象。

代替使用：

props

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;

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

2 个答案: