时间戳

首页 > 解决方案 > 为什么我的 HTML 标签中的变量没有显示出来？

javascript - 为什么我的 HTML 标签中的变量没有显示出来？

问题描述

我正在尝试制作一个组件来显示数组中的随机产品。当我console log props.products[random].company或任何其他属性时，我可以在控制台中看到它们。但是当我将它们放在 HTML 标记中时，它不会呈现。

数组的长度是 14。有随机数被渲染，但它们有时也大于 14，并且由于某种原因似乎是按顺序排列的。

这是组件的文件：

import React, { useEffect } from 'react';
import Link from 'react-router-dom';
import { connect } from 'react-redux';
import { getProducts } from '../../../actions/productsActions';
export const ProductSm = (props) => {
  console.log(props.products);

  return (
    <div>
      {
       props.products.length >= 1 && setInterval(() => {
  
          let random = Math.floor(Math.random()*props.products.length);
          console.log(random);
          console.log(props.products[random].company);
          return (
                <div>
                  <p>{props.products[random].company}</p>
                  <p>{props.products[random].name}</p>
                  <img src={`http://localhost:5000/${props.products[random].productImage}`} alt="productImage"/>
                </div>)
        }, 5000)
      }
    </div>
  )
}

const mapStateToProps = (state) => ({
  products: state.products.products,
  loading: state.products.products
})

export default connect(mapStateToProps, {getProducts})(ProductSm);

这是包含 ProductSm.js 的组件：

import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { getProducts, setLoading } from '../../../actions/productsActions';
import { connect } from 'react-redux';
import {Link} from 'react-router-dom';
import './Home.css';
import Loading from './Loading';
import Navbar from './Navbar';
import ProductSm from './ProductSm';
export const Home = (props) => {
  useEffect(() => {
    props.setLoading();
    props.getProducts();
    //eslint-disable-next-line
    console.log(props.products);
    console.log(props.loading);
  }, []); 
  if(props.loading) {
    return <Loading />
  }
  else {
    
  return (
      <div>
        <Navbar />
        <div className="home">
          <div className="group-1">
            <div className="branding">
              <div className="brandName">
                The
                <br/>
                Sole
                <br/>
                Store
              </div>
              <div>
                  <p>The finest designs and fits.</p>
              </div>
            </div>
            <div className="viewProducts">
              <div>
                <p>
                  Check out our latest and greatest models
                </p>
                <Link className="productsBtn" to="/shoes">GO <i className="fas fa-arrow-right"/></Link>
              </div>
            </div>
          </div>
          <div className="group-2">
            <div className="products">
                <ProductSm />
                <ProductSm />
                <ProductSm />
                <ProductSm />
            </div>
            <div className="something"></div>
            </div>
        </div>
      </div>
  )
}
}
Home.propTypes = {
  products: PropTypes.array.isRequired,
  loading: PropTypes.bool.isRequired
}

const mapStateToProps = state => ({
  products: state.products.products,
  loading: state.products.loading
});

export default connect(mapStateToProps, {getProducts, setLoading})(Home);

我真的很感激任何帮助。谢谢在此处输入图像描述

在此处输入图像描述

标签： javascripthtmlreactjsredux

解决方案

You are currently returning the result of setInterval, not any JSX:

return (
    <div>
      {
       props.products.length >= 1 && setInterval(() => {

The function passed to setInterval is called asynchronously (after 5000ms in this case). So, you aren't, in fact, returning anything to render.

Instead, you probably want to track the random number as state, and trigger a re-render every 5000ms

推荐阅读