React父组件传参给子组件首次为undefined后续才拿到数据的报错原因

• 父组件初始化的producto状态为空数组，而接口返回的是单个商品对象，空数组本身不存在imagenes属性，因此首次渲染时传递给子组件的imagenes值为undefined
• useEffect中的fetch请求是异步执行的，组件首次渲染时请求还未返回结果，子组件已经执行渲染逻辑，直接对undefined调用.map方法就会触发该报错。

你可以任选以下任意一种方式修复，推荐组合使用更稳妥：

方案1：修正父组件初始状态 #

将父组件的初始状态从空数组改为带默认结构的对象，同时规范状态更新函数命名：

// 原来的写法
// const [producto, productos] = useState([]);
// 修改后
const [producto, setProducto] = useState({
  imagenes: []
});

同时修改fetch回调里的更新方法名：

.then(data=>setProducto(data))

方案2：父组件加加载判断 #

新增loading状态，请求完成前不渲染子组件，避免传递无效值：

const ItemDetailContainer = () => {
    const [producto, setProducto] = useState({});
    const [loading, setLoading] = useState(true);
    const { productId } = useParams();

    useEffect(() => {
        setLoading(true);
        fetch('http://localhost:3000/productos/' + productId)
            .then(res=>res.json())
            .then(data=>setProducto(data))
            .finally(()=>setLoading(false))
    }, [productId]);

    if(loading) return <div>加载中...</div>

    return (
        <div className="container">
            <ItemDetail
                nombre={producto.nombre}
                id={producto.id}
                precio={producto.precio}
                category={producto.category}
                imagenes={producto.imagenes}
                ancho={producto.ancho}
                alto={producto.alto} />
        </div>
    )
}

方案3：子组件做参数兼容 #

给imagenes设置默认值，或者使用可选链调用map方法：

// 1. 给参数设置默认值
const ItemDetail = ({ nombre, id, precio, category, imagenes = [], ancho, alto }) => {
  // 内部逻辑不变
}

// 2. 或者调用map时用可选链加空值兜底
{imagenes?.map((p) => (
  <img src={p} className="d-block w-100" alt={nombre} />
)) || null}

内容的提问来源于stack exchange，提问作者Bruno Cicerchia