返回函数未呈现表行React JS

Question

[当我记录快照中的值时，它在那里显示值，但未在浏览器中呈现。

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}>
            <td>{i}</td>
            <td>{keys.child("Name").val()}</td>
            <td>{keys.child("employee_type").val()}</td>
            <td>{keys.child("email").val()}</td>
            <td>{keys.child("phoneNum").val()}</td>
            <td>
              <input class="view" name="view" type="submit" value="View" />
            </td>
          </tr>
        );
      });
    });
  };

  return (
    <div className={styles.Employee}>
      <h1 className={styles.header}>Employees</h1>
      <table>
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">Name</th>
            <th scope="col">Employee Type</th>
            <th scope="col">Email</th>
            <th scope="col">Phone #</th>
            <th scope="col">Action</th>
          </tr>
        </thead>
        <tbody>{renderTable()}</tbody>
      </table>
    </div>
  );
}

export default Employees;

Answer 1

renderTable函数实际上不返回任何内容。您需要将JSX收集到数组中并返回：

const renderTable = () => {
    const items = [];
    return rootRef.on("value", snap => {
      snap.forEach((keys, i) => {
        items.push(
          <tr key={keys}>
            <td>{i}</td>
            <td>{keys.child("Name").val()}</td>
            <td>{keys.child("employee_type").val()}</td>
            <td>{keys.child("email").val()}</td>
            <td>{keys.child("phoneNum").val()}</td>
            <td>
              <input class="view" name="view" type="submit" value="View" />
            </td>
          </tr>
        );
      });
    });

    return items;
  };