javascript - 为什么对象作为 React 子对象无效?
问题描述
我希望有人能帮助我!我无法以正确的方式渲染我的对象。
我的 JSON:
{"status":"Entregado","_id":"5f490dd9b3f5192230a8f536","products":[{"_id":"5f44eaa1cf215b305449e216","name":"Reto Gratuito Medita Healing","price":0,"createdAt":"2020-08-25T10:40:33.845Z","updatedAt":"2020-08-25T10:40:33.845Z","__v":0,"count":1}],"details":"dimebag_666","client_email":"jobroman83@gmail.com","state":"CDMX","address":"acueducto","zip":"16200","client_id":"5f2ac527543c3835d028337c","amount":0,"createdAt":"2020-08-28T13:59:53.129Z","updatedAt":"2020-09-07T09:03:39.117Z","__v":0}
我用这段代码渲染了几乎所有的组件:
const SingleOrder = (props) => {
const token = getCookie('token') //// <-- right one
const Id = getCookie('token')
const [order, setOrder] = useState({});
const [error, setError] = useState(false);
const [statusValues, setStatusValues] = useState([])
const loadSingleOrder = orderId => {
read(orderId,token).then( data => {
if (data.error){
setError(data.error)
} else {
setOrder(data)
}
})
}
const loadStatusValues = () => {
getStatusValues(Id, token).then(data => {
if (data.error){
console.log(data.error)
} else{
setStatusValues(data)
}
})
}
const handleStatusChange = (e, orderId) => {
// console.log('update order status')
updateOrderStatus(Id, token ,orderId, e.target.value).then(
data => {
if (data.error){
console.log('status update failed')
} else {
// setRun(!run)
loadSingleOrder(orderId)
console.log('changed')
alert('Has Cambiado el estatus')
}
}
)
}
const showStatus = (order) => {
return (
<div className='form-group'>
<h5 className='mark mb-4'>Estatus: {order.status}</h5>
<select className='form-control'
onChange={(e) => handleStatusChange(e, order._id)}>
<option>Actualizar estado de orden</option>
{statusValues.map((status, index) => (
<option key={index} value={status}>{status}</option>
) )}
</select>
</div>
)
}
const showInput = (key, value) => {
return (
<div className="input-group mb-2 mr-sm-2">
<div className="input-group-prepend">
<div className="input-group-text">{key}</div>
</div>
<input type="text" value={value} className="form-control" readOnly/>
</div>
)
}
useEffect (() => {
const orderId = props.match.params.orderId
loadSingleOrder(orderId)
loadStatusValues()
},[props])
const showOrderList = () => {
return (
<div className="card mr-2 mt-2 mb-5">
<h5 className="mb-1 mt-2 text-center bg-primary" style={{color:'red'}}>Numero de Orden: {order._id}</h5>
<ul className="list-group">
<li className='list-group-item'>
{/* {o.status} */}
{showStatus(order)}
</li>
<li className='list-group-item'>ID cliente: {order.client_id} </li>
<li className="list-group-item">Télefono: {order.client_phone}</li>
<li className="list-group-item" style={{fontWeight:'bold'}}> Cuenta de <i class="fab fa-instagram"/> vinculada al Taller: {order.details}</li>
<li className="list-group-item">E-mail: {order.client_email}</li>
<li className='list-group-item'>Total de la orden: ${order.amount}</li>
<li className='list-group-item' style={{fontWeight:'bold'}}>Comprado el dia:{" "}
{moment(order.createdAt).locale('es').format('LL')}
</li>
<li className='list-group-item'>Dirección : {order.address}</li>
<li className='list-group-item'>Estado : {order.state}</li>
<li className='list-group-item'>Código Postal: {order.zip}</li>
if a put this code the problem is --> "TypeError: order.products is undefined" {order.products.map((p, pIndex) => (
<div className='' key={pIndex} style={{padding:'20px', border:'1px solid #e6c4ba'}}
>
{showInput('Nombre del producto:', p.name)}
{/* {showInput('Precio del producto $:', p.price)}
{showInput('Cantidad pedida del producto:', p.count)}
{showInput('ID del producto:', p._id)} */}
</div>
))}
if i only put this i recived --> {order.products}
Error: Objects are not valid as a React child (found: object with keys {_id, name, price, createdAt, updatedAt, __v, count}). If you meant to render a collection of children, use an array instead.
</ul>
</div>
)
}
return(
<Layout>
<div className='container'>
{/* {showOrderList()} */}
{JSON.stringify(order)}
</div>
</Layout>
)
}
但是当我想在我的对象中渲染产品时,我无法渲染它们,因为我收到了消息:
错误:对象作为 React 子对象无效(发现:对象的键为 {_id、name、price、createdAt、updatedAt、__v、count})。如果您打算渲染一组子项,请改用数组。
{order.products}
我必须以正确的方式渲染它,我尝试过map
等等。我总是收到这个错误。
解决方案
你可以map()
这样使用:
<ul>
{order?.products.map(item => (
<>
<li>{item.name}</li>
<li>{item.price}</li>
<li>{new Date(item.createdAt)}</li>
<li>{new Date(item.updatedAt)}</li>
</>
)
}
</ul>
您还可以包括其余的对象项目,如id
或count
如有必要。
使用<> </>
标签是分别的简短方法<React.Fragment> </React.Fragment>
。
推荐阅读
- javascript - 我正在传递道具,但我看不到它们
- django - 管理页面中发生的 Django 日志记录错误
- node.js - 通过请求获取文件时如何发送文件?
- google-chrome - 从 macbook 中删除旧的 chrome 遥控器
- r - 为 VIM 包加载库时出现问题
- apache - Apache 2 将 http 重定向到 https 缺少授权标头但不使用 https
- reactjs - React 样式的组件为道具添加自定义逻辑?
- c++ - 变量值通过多个测试用例保留
- google-cloud-functions - 什么会导致flyway在启动时不自动检测迁移,但在运行时能够这样做?
- bash - 从与另一个大文件的行匹配的大文件中查找并提取一行