不能在 React 中的道具上使用 toLocaleString(.js

Question

我已经尝试了所有的方法，但我无法做到这一点，当我试图在应用程序中断的道具上执行该方法时，这是唯一发生这种情况的地方，因为我在应用程序的其他部分中使用了该方法(而且它有效(。我认为问题是在呈现数据之前执行该方法。

这是代码：

const ItemDetail = ({data}) => {

const[goToCart,setGoToCart]=useState(false);
const {addProduct} = useCartContext()
const onAdd=(value)=>{
value > 0 && setGoToCart(true);
addProduct(data, value)
}

return (
<div className='itemDetailBox'>
<div>
<img src={data.img_url} className='itemDetailImg' alt="Imagen de producto"></img>
</div>
<div className='ItemDetailTextBox'>
<h2 className='itemDetailTitle'>{data.title}</h2>
<p className='itemDetailPrice'>${data.price.toLocaleString()}</p>
<p className='ietmDetailDescription'>{data.description}</p>
{
goToCart ?  <><Link to='/'> <button className='btn'>Seguir Comprando</button></Link><Link to='/cart'> <button className='btn'>Finalizar Compra</button></Link></> : <ItemCount initial={1} stock={10} onAdd={onAdd}/>
}
</div>
</div>
)
}

这里有一个错误：；未捕获的类型错误：无法读取未定义的属性(读取"toLocaleString"(">

这就是父元素：

const ItemDetailContainer = () => {
const [product,setProduct]= useState([])
const {id} = useParams();

useEffect(()=>{
const querydb = getFirestore();
const querydoc = doc(querydb, 'products', id);
getDoc(querydoc)
.then(res=> setProduct({id:res.id, ...res.data()}))
.then (console.log(product))
},[])

return (
<div>
<ItemDetail data = {product}/>
</div>
)
}
export default ItemDetailContainer

Answer 1

所以当你说它在数据呈现之前执行时，你说的有点对。

子组件假设它总是使用有效的data道具运行，但在第一次传递时没有数据，它仍在获取。toLocaleString期望price存在，因为它暂时不存在，所以它出错了。

你可以通过以下几种方式绕过这个问题：

1. 在您的父组件中，如果数据不存在，则不要返回子组件，返回null
2. 或者在子组件中添加检查，如果数据不存在，则返回null

您可以更进一步，返回某种加载/骨架组件，而不是返回null，这样用户就知道发生了什么，并且完整的组件不会在准备好后弹出到UI中。