Question

我正在做一个React Web应用程序，并尝试根据所选数据（一段时间内的用户）动态生成表。用户数据下载成功。我在其他页面中使用了相同的方法。但是，这一次它不会渲染。

代码如下：

displayUsers(tableOfUsers) {
  let table = tableOfUsers.map(user => {
    return (
      <div className="div-table-row-titles" key={user.name}>
        <div className="div-table-col">{user.name}</div>
        <div className="div-table-col">{user.surname}</div>
        <div className="div-table-col">{user.email}</div>
        <div className="div-table-col">{user.tel}</div>
        <div className="div-table-col">{user.addedBy}</div>
      </div>
    );
  });
  return table;
}

render() {
  const userData = null;
  if (this.state.volunteers !== []) {
    console.log("HELLO");
    let userData = this.state.volunteers.map(user => {
      return (
        <div className="div-table-row-titles">
          <div className="div-table-col">{user.name}</div>
          <div className="div-table-col">{user.surname}</div>
          <div className="div-table-col">{user.email}</div>
          <div className="div-table-col">{user.tel}</div>
          <div className="div-table-col">{user.addedBy}</div>
        </div>
      );
    }); // this.displayUsers(this.state.volunteers);
    console.log(userData);
    userData = userData[0];
  }

  return (
    <form id="form1">
      <div>
        <p>{this.props.startTime}</p>
      </div>
      <div className="div-table">
        <div className="div-table-row-titles">
          <div className="div-table-col" align="center">
            Name
          </div>
          <div className="div-table-col" align="center">
            Surname
          </div>
          <div className="div-table-col" align="center">
            Email
          </div>
          <div className="div-table-col" align="center">
            Tel. No.
          </div>
          <div className="div-table-col" align="center">
            Volunteer
          </div>
        </div>
        {userData}
      </div>
    </form>
  );
}

用户数据在那里，已正确排序，userData不是null（检测为[{...},{...}]）。但是，它不会显示。有什么想法我该如何解决？

谢谢！

------解决方案-------

我发现了问题。 user.addedBy是一个对象（addedBy具有其他属性），因此React无法对其进行处理。解决了！

Answer 1

如果无法访问项目，则调试起来会有些挑战。我将从简化问题开始。

首先也许要看一下您要完成的工作并找出可以重用的组件（单元格，行，列，列等）
开始一次构建每个部分，这样您就可以一次调试每个部分，例如，如果您有5名志愿者，那么您可以得到5行来显示吗？

请问您为什么要使用div而不是表格？

Answer 2

此问题是由于 let 的作用域？由于let是块作用域的，并且“ let userData” 在if块之内，因此它在{}之外不可用。您可以尝试在if范围之外声明用户数据还是使用var ??

生成的div表不呈现

2 个答案: