如何在 React 表中显示来自 Mysql 的数据

Question

我的主要问题是数据是垂直输入到表格中，而不是水平输入到相应的列中。

<Table className="align-items-center table-flush" responsive>
              <thead className="thead-light">
                <tr>
              <th scope="col">Project</th>
              <th scope="col">Budget</th>
              <th scope="col">Interest</th>
              <th scope="col">Country</th>
              <th scope="col">Score</th>
              <th scope="col">Completion</th>
              <th scope="col" />
            </tr>
          </thead>
          <tbody>

                {tutorials &&
                  tutorials.map((tutorial, index) => (
                    <tr
                      className={
                        "list-group-item " + (index === currentIndex ? "active" : "")
                      }
                      onClick={() => setActiveTutorial(tutorial, index)}
                      key={index}
                    >
                      <td>{tutorial.title}</td>
                      <td>{tutorial.size}</td>
                      <td>{tutorial.country}</td>
                    </tr>
                  ))}


            <td className="text-right">
              <UncontrolledDropdown>
                <DropdownToggle
                  className="btn-icon-only text-light"
                  href="#pablo"
                  role="button"
                  size="sm"
                  color=""
                  onClick={e => e.preventDefault()}
                >
                  <i className="fas fa-ellipsis-v" />
                </DropdownToggle>
                <DropdownMenu className="dropdown-menu-arrow" right>
                  <DropdownItem
                    href="#pablo"
                    onClick={e => e.preventDefault()}
                  >
                    Update
                  </DropdownItem>
                  <DropdownItem
                    href="#pablo"
                    onClick={e => e.preventDefault()}
                  >
                    ...
                  </DropdownItem>
                  <DropdownItem
                    href="#pablo"
                    onClick={e => e.preventDefault()}
                  >
                    Delete
                  </DropdownItem>
                </DropdownMenu>
              </UncontrolledDropdown>
                </td>



                  </tbody>
                  </Table>

                  </Card>
                  </div>
                  </Row>


                  </Container>
                  </>
              );
                  }


                export default TutorialsList;

这是我看到的……

我需要将数据放入正确的框中，例如在第一行：

项目：皮诺 预算 2300 美元 国家：尼日利亚

第二行： 项目：佛朗哥 预算 4500 美元 国家：加纳

Answer 1

你有没有尝试过这样的事情？

...
            {tutorials &&
              tutorials.map((tutorial, index) => (
                <tr
                  className={
                    "list-group-item " + (index === currentIndex ? "active" : "")
                  }
                  onClick={() => setActiveTutorial(tutorial, index)}
                  key={index}
                >
                  <td>{tutorial.title}</td>
                  <td>{tutorial.size}</td>
                  <td>{tutorial.country}</td>
                  ...other fields
                </tr>
              ))}
...

如果我有什么问题，请告诉我。谢谢。