React - 加载的数据能够控制台日志但未显示在 DOM 中？

Question

我查看了日志，state Classs and Classes中的数据是好的，但是当我进入页面时， { renderCards }没有出现。

有趣的是，当我修复代码并保存它时，我的本地服务器被重新加载，然后{ renderCards }出现了？ 为什么？

function ClassDetailPage(props) {

    const dispatch = useDispatch();        
    const classId = props.match.params.classId
    const [Classs, setClasss] = useState({})
    const [Classes, setClasses] = useState([])
    console.log(Classs.desc_image);
    
    useEffect(() => {
        dispatch(videoclasslist())
        .then((res) => {
            const class_list = res.payload
            console.log(class_list,'123');
            setClasses(class_list)
        })
    }, [dispatch])

    useEffect(() => {
        dispatch(videoclassdetail(classId))
        .then((res) => {
            console.log(res.payload);
            setClasss(res.payload)            
            console.log(res.payload.content);  
        })
    }, [dispatch])


    


    const renderCards = Classes.map((product, index) => {
        return <a href={'/videoclass/detail/'+ product.id } key={index}>
        
            <Card className="owl-theme Other-Class">
                <Card.Img className="Other-Class-Image" src={API_BASE_URL+product.image}/>  
                <Card.Title className="Other-Class-Title">{product.title}</Card.Title>
                <Card.Text className="Other-Class-Trainer">{product.nickname}</Card.Text>
                <Card.Text className="Other-Class-Price">월 {product.price}원 <Badge variant="warning">Free</Badge></Card.Text>            
            </Card>
            
        </a>
    })
    
    return (
        <div>   
        <div className="detail-board">
            <Row>
                <Col className="imagespace" lg={6} xs={12}>
                    <Image className="img-fluid" src={API_BASE_URL + Classs.desc_image}/>
                </Col>
                <Col lg={6} xs={12}>
                    {/* ProductInfo */}
                    <ProductInfo detail={Classs} />
                </Col>                            
            </Row>
        </div>
            <h2> classes</h2>
            <Row className="Other-Classes-Row">
                <OwlCarousel className="Other-Classes" loop items={3} autoplay ={true}>
                    { renderCards }
                </OwlCarousel>
            </Row>
            <br/>
       
        </div>        
    )   
}


export default ClassDetailPage

Answer 1

确保在renderCards map function 中返回整个 JSX 部分，而不仅仅是<a href={'/videoclass/detail/' + product.id} key={index}> 。 尝试将所有内容都包含在括号中，如下所示：

const renderCards = Classes.map((product, index) => {
  return (
    <a href={'/videoclass/detail/' + product.id} key={index}>
      <Card className="owl-theme Other-Class">
        <Card.Img
          className="Other-Class-Image"
          src={API_BASE_URL + product.image}
        />
        <Card.Title className="Other-Class-Title">{product.title}</Card.Title>
        <Card.Text className="Other-Class-Trainer">
          {product.nickname}
        </Card.Text>
        <Card.Text className="Other-Class-Price">
          월 {product.price}원 <Badge variant="warning">Free</Badge>
        </Card.Text>
      </Card>
    </a>
  );
});