Question

当我记录来自snap参数的值时，它在那里显示值，但是renderTable函数创建的行未在浏览器中呈现。

function Employees() {
  const rootRef = firebase
    .database()
    .ref()
    .child("Employees");

  const renderTable = () => {
    var i = 0;
    return rootRef.on("value", snap => {
      snap.forEach(keys => {
        i++;
        return (
          <tr key={keys}>
            ...
          </tr>
        );
      });
    });
  };

  return (
    <div className={styles.Employee}>
      <h1 className={styles.header}>Employees</h1>
      <table>
        <thead>
          <tr>
            ...
          </tr>
        </thead>
        <tbody>{renderTable()}</tbody>
      </table>
    </div>
  );
}

export default Employees;

Answer 1

好像firebase的on()方法异步调用回调。您必须更改方法，并在React组件中使用状态和生命周期，即。借助钩子useEffect和useState以及map方法而不是forEach的帮助。例如：

function Employees() {
  const [employees, setEmployees] = useState([]);

  useEffect(() => {
    firebase
      .database()
      .ref()
      .child("Employees")
      .on("value", setEmployees);
  }, []);

  const renderTable = () => {
    return employees.map((employee, i) => {
      return (
        <tr key={keys}>
          ...
        </tr>
      );
    });
  };

  return (
    <div className={styles.Employee}>
      <h1 className={styles.header}>Employees</h1>
      <table>
        <thead>
          <tr>
            ...
          </tr>
        </thead>
        <tbody>{renderTable()}</tbody>
      </table>
    </div>
  );
}

export default Employees;

Answer 2

这是rootRef所引用的

Answer 3

因此我对此进行了更新，当我在JSX中登录Emp属性时，它包含一个Table Table行数组，这应该是这样的。当我这样做时，它正在渲染数组的最后一个节点。当我在其上使用.map函数呈现所有数组时，它显示此错误TypeError：Emps.map不是函数。我还应该怎么渲染这个数组？

alias       | datatype
daycharge   | float
weekcharge  | float
monthcharge | float
start       | datetime
stop        | datetime

}

导出默认员工

返回函数未渲染表行React JS

3 个答案: