达到 6 列时创建新行

Question

我的代码有问题，无法将映射输出到 table 中的 6 列。所以我想要的是，只要数据达到 6 列，它就会创建一个新行。下面是我的代码：

 import React from "react";
import { useEffect, useState } from "react";
import timestamp from "unix-timestamp";

export const Result = (code) => {
const [output, setOutput] = useState([]);
const [time, setTime] = useState([]);
const [data, setData] = useState([]);
const [hari, setHari] = useState([]);
useEffect(() => {
 getWaktuSolat();
 outputList();
 setData([]);
}, [code.code]);

var requestOptions = {
 method: "GET",
 redirect: "follow",
};
async function getWaktuSolat() {
 await fetch("https://mpt.i906.my/api/prayer/" + code.code, requestOptions)
   .then((response) => response.json())
   .then((result) => {
     console.log(result.data);
     setOutput(result.data);
     setTime(result.data.times);
     console.log(time);
   })
   .catch((error) => console.log("error", error));
}
function outputList() {
 for (let x = 0; x < time.length; x++) {
   for (let z = 0; z < 6; z++) {
     let j = timestamp.toDate(time[x][z]);
     data.push(j.toString().slice(15, 21));
     console.log(data);
   }
 }
}
outputList();
return (
 <div className="Result">
   <h1>{output.place}</h1>
   <table>
     <th>Subuh</th>
     <th>Syuruk</th>
     <th>Zuhur</th>
     <th>Asar</th>
     <th>Maghrib</th>
     <th>Isyak</th>
     <tr>
       {data.map((item, index) => (
         <td>{item}</td>
       ))}
     </tr>
   </table>
 </div>
);
};
export default Result;

这是我的输出

enter image description here

Answer 1

编辑：为了不在 return 调用中使用三元条件并确保每个 <tr> 都能检测到其对应的 </tr>，我将 table 的渲染拆分如下：

const renderTable = (data) => {
  const rows = [];
  for (let i = 0; i < data.length; i += 6) {
    rows.push(<tr key={i}>{renderRow(data.slice(i, i + 6))}</tr>);
  }
  return rows;
};

const renderRow = (row) => {
  return row.map((element) => <td key={element}>{element}</td>);
};

每六个元素将创建一个新行，最后不可能有空行。你可以看到它的实际效果 in this JSFiddle.

原创：为了每六列触发一个新行，您可以在 index 上使用 remainder %。注意index是从0开始的，每一个应该放在新行的项目都会有一个能被6整除的索引，即index % 6 === 0。在这样的项目上，关闭上一行并开始另一行：

<table>
  <th>Subuh</th>
  <th>Syuruk</th>
  <th>Zuhur</th>
  <th>Asar</th>
  <th>Maghrib</th>
  <th>Isyak</th>
  <tr>
  {data.map((item, index) => (
    if (index % 6 === 0) {
      return <td>{item}</td></tr><tr>
    } else {
      return <td>{item}</td>
    })
  }
  </tr>
</table>

这种方法的一个缺点是，如果数据单元格的数量是 6 的倍数，那么 table 将以空行结尾。要解决此问题，return 最后的 <tr> 除非 data.length % 6 === 0，并且不要为 data 的最后一个元素开始新行，即 index === data.length - 1.

Answer 2

您必须将 tr 元素放入循环中。
我提供了算法，但语法可能有误，因为我对 React 不熟悉。

<table>
  <th>Subuh</th>
  <th>Syuruk</th>
  <th>Zuhur</th>
  <th>Asar</th>
  <th>Maghrib</th>
  <th>Isyak</th>
  {data.map((item, index) => (
    if (index % 6 === 0) {
      // Start a new row if first element
      return <tr><td>{item}</td>
    } else if (index % 6 === 5) {
      // End the row if last element
      return <td>{item}</td></tr>
    } else {
      // just insert item if middle
      return <td>{item}</td>
    })
  }
</table>

达到 6 列时创建新行

Make a new row when reach to 6 columns

mapping

reactjs