如何解决作为道具传递给子组件的反应状态未显示
我用钩子创建了一个状态。然后,使用钩子从其他组件修改其值。然后,根据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;
控制台没有给我任何错误。项目编译。不过,无法回显这些值。
解决方法
这是因为您没有破坏[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
,
@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;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。