对象数组未打印到屏幕 - 反应答案

【问题标题】：Object array not printing to screen - React对象数组未打印到屏幕 - 反应
【发布时间】：2022-02-08 11:53:47
【问题描述】：

在页面加载时，我使用 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 映射到一个表。我检查了 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 上看到了输出？谢谢

【问题讨论】：

那么男性和女性数组的特点是什么，你必须将它们绑定到一个useState（），然后在函数中创建两个数组作为本地，然后进行所有更改，使用它们并设置数组的状态，应该可以。如果你可以把它放在代码沙箱中，我可以编辑并发送给你
谢谢，我更新了关于 qestion 的原始代码，因为我遗漏了 maleArray。沙盒在这里codesandbox.io/s/wispy-feather-6ebqk?file=/src/App.js。由于有外部 API，无法运行，但询问是否还有其他问题
你可以试试这个codesandbox.io/s/spring-leftpad-j84ru?file=/src/App.js
这对我有用，非常感谢！
嗨@Brian 我已经发布了一个完整的答案，并附有解释

标签： javascript reactjs html-table state

【解决方案1】：

它不起作用的主要原因是未设置状态。您需要使用 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;

useState ：您必须确保数组没有直接更新，因为这不会呈现数据，因此您应该创建一个局部变量，然后将其分配给最后的状态，或者您可以使用扩展运算符然后分配他们，两者都应该工作。

【讨论】：

【解决方案2】：

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

中有错字

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

【讨论】：