我会在Map前确认产品是否存在。另外，不需要使用renderList变量，您可以直接在return语句中Map它。另外，我建议您在<p>元素中放置文本，以便在语义上更加正确。例如：

const MarsRoversListing = () => {

    const products = useSelector((state) => state.allProducts.products);
    return ( 
      products && products.map((product) => {
        return (
          <div className="four columns wide" key={product?.id}>
            <div className="ui">
                <div className="card">
                    <div className="image">
                        <img src={product?.url} alt={product?.explanation}/>
                        <div className="content">
                            <p className="header">{product?.title}</p>
                            <p className="header">{product?.hdurl}</p>
                            <p className='rover-name'>{product?.copyright</p>
                            <p className='date'>{product?.date}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>);
    })
}