reactjs - 状态值未显示

Question

我是 React.js 的新手，我正在使用反应钩子创建一个新应用程序，我从 API 获取数据并使用 setProductTypes() 将其设置为状态，然后当我读取该状态值 productTypes.length 它没有显示值（从调试器中观察到），我根据它显示数据并显示数据。

import React, { useState, useEffect } from "react";
import ProductTypeDataService from "../../services/ProductTypeService";
import Card from 'react-bootstrap/Card'
import { CardGroup } from "react-bootstrap";

const ProductTypeList = () => {

    const [productTypes, setProductTypes] = useState([]);
    const [nestedArray, setNestedArray]= useState([]);
     
    useEffect(() => {
      debugger ;
        retrieveTutorials();
      },[]);
 
    const retrieveTutorials = () => {
        ProductTypeDataService.getAll()
          .then(response => {
            setProductTypes(response.data);
            createNestedArray();;
            
          })
          .catch(e => {
            console.log(e);
          });
      };

      const createNestedArray= ()=>{

        var arr = new Array([]);

        var arrayLength = productTypes.length;
        for (var i = 0; i < arrayLength; i+4) {          
          for (var k = 0; k < 4; k++) {       
            arr[i,k] =productTypes[i+k];         
          }         
        }
        setNestedArray(arr);
        console.log(nestedArray);
      };

    return (
      <div className="col-md-6">
        <h4>Product Type List</h4>

        <CardGroup>
          {productTypes &&
            productTypes.map((productType, index) => (
              <Card>
              <Card.Body>
              <Card.Img variant="top" src={productType.imageUrl} />
              </Card.Body>
              <Card.Footer>
                <small className="text-muted">{productType.name}</small>
              </Card.Footer>
            </Card>             
            ))}
        </CardGroup>
        </div>
    )
}

export default ProductTypeList
 

标签： reactjsreact-hooks

Answer 1

状态是异步更新的。

您要么必须将productTypes收到的 API 调用响应作为参数传递给，createNestedArray(response.data)要么createdNestedArray在useEffect.

useEffect(() => {
  // function will be called when productTypes changes
  createNestedArray()
}, [productTypes])