对象数组不打印到屏幕 - React

Question

在页面加载时，我使用 UseEffect 获取一个对象数组 files。数组映射通过，如果是男性则添加到maleArray，如果是女性则添加到femaleArray。最后，我使用 console.log 来检查新数组是否已填满并且已经填满。在此之后，我还将 hasLoaded 设置为 true。

const[hasLoaded, setHasLoaded] = useState();
var maleArray= [];
var femaleArray= [];

useEffect(() => {
      getPersonGender();
      
    }, [props.files]);

    const getPersonGender = () => {
      if(!props.files.length > 0){
        console.log("WAITING");
      }else{
        props.files.map( person => {
          if(person.gender=== "male"){
            maleArray.push(person);
          }else{
            femaleArray.push(person);
          }
        });
        console.log(maleArray)
        console.log(femaleArray)
        setHasLoaded(true);
      }
    }

然而，当我到达 return 语句时，我填充的新数组似乎是空的。例如，我试图将 maleArray 映射到 table。我检查了 hasLoaded，这是真的，但是当我开始打印时，没有任何显示，我也不知道为什么。当我尝试调试时，似乎 maleArray 和 femaleArray 从未填充，但是，我得到的 console.log 结果表明它们是。

{!hasLoaded
    ?<div class="spinner-border" role="status"></div>
    :
    <table class="table">
    <tbody>
        {maleArray.map(male=> (
            <tr>
                <td>{male.name}</td>
                <td>{male.age}</td>
            </tr>
    ))}
    </tbody>
    </table>
}

新数组未被填充的任何原因，但我在 console.log 上看到了输出？谢谢

Answer 1

我认为您在 {maleArray.map(male=>

不应该是 { maleArray.map((male) => { 其余代码 }

Answer 2

它不起作用的主要原因是未设置状态。您需要使用 useState() 挂钩将其分配给数组，然后进一步使用它们

完整的工作示例


import { useState, useEffect } from "react";

function ConfigurationList(props) {
  const [hasLoaded, setHasLoaded] = useState();
  // usage of hooks
  const [maleArray, setMaleArr] = useState([]);
  const [femaleArray, setFemaleArr] = useState([]);

  useEffect(() => {
    getPersonGender();
  }, [props.files]);

  const getPersonGender = () => {
    let maleBuf = [];
    let femaleBuf = [];
    if (!props.files.length > 0) {
      console.log("WAITING");
    } else {
      props.files.map((person) => {
        if (person.gender === "male") {
          maleBuf.push(person);
        } else {
          femaleBuf.push(person);
        }
      });
      console.log(maleArray);
      console.log(femaleArray);
      // Setting the value to the state
      setFemaleArr([...femaleBuf])
      setMaleArr([...maleBuf])
      setHasLoaded(true);
    }
  };

  return (
    <div>
      <div class="card rounded-0">
        <div class="card-header bg-dark custom-font rounded-0">Male</div>

        <div class="card-body text-center">
          {!hasLoaded ? (
            <div class="spinner-border" role="status"></div>
          ) : (
            <table class="table">
              <thead>
                <tr>
                  <th style={{ width: "30%" }} scope="col">
                    Name
                  </th>
                  <th style={{ width: "30%" }} scope="col">
                    Age
                  </th>
                </tr>
              </thead>
              <tbody>
                {maleArray.map((male) => (
                  <tr>
                    <td>{male.name}</td>
                    <td>{male.age}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </div>
      </div>
    </div>
  );
}

export default ConfigurationList;

使用状态：你必须确保数组没有直接更新，因为那样不会渲染数据，所以你应该创建一个局部变量然后将它赋值给最后的状态，或者你可以使用展开运算符然后赋值他们，两者都应该工作。

对象数组不打印到屏幕 - React

Object array not printing to screen - React

javascript

reactjs

html-table

state