React js 中的自定義調度程序輪播未按預期工作

Question

我正在嘗試為每日視圖實現自定義調度程序輪播。 這是我的方法，但目前不起作用。 代碼沙箱鏈接： https：//codesandbox.io/s/wild-sky-7l319u Refs 在點擊下一個或上一個時沒有任何反應。 我不知道也許我的上一個和下一個邏輯不起作用，但注銷 ref，顯示它更新正常。 這段代碼有什么問題，為什么它沒有給我最終結果。 我在這里做錯了什么？

const DailyTable = () => {
  let time = [
    "12:00 AM",
    "01:00 AM",
    "02:00 AM",
    "03:00 AM",
    "04:00 AM",
    "05:00 AM",
    "06:00 AM",
    "07:00 AM",
    "08:00 AM",
    "09:00 AM",
    "10:00 AM",
    "11:00 AM",
    "12:00 PM",
    "01:00 PM",
    "02:00 PM",
    "03:00 PM",
    "04:00 PM",
    "05:00 PM",
    "06:00 PM",
    "07:00 PM",
    "08:00 PM",
    "09:00 PM",
    "10:00 PM",
    "11:00 PM",
  ];

  const boxRef = useRef(null);
  const boxRef2 = useRef([]);
  const addToRef = (el) => {
    boxRef2.current = [];
    if (boxRef2 && !boxRef2.current.includes(el)) {
      boxRef2.current.push(el);
    }
  };
  const previous = () => {
    boxRef.current.scrollLeft += -100;
    for (let index = 0; index < boxRef2.current.length; index++) {
     boxRef2.current[index].scrollLeft += -100;
    
    }
  };
  const next = () => {
    console.log(boxRef2.current.length);
    boxRef.current.scrollLeft += 100;
    for (let index = 0; index < boxRef2.current.length; index++) {
      console.log(boxRef2.current[index]);
      boxRef2.current[index].scrollLeft += 100;
    }
  };

 


  return (
    <Fragment>
      <Box sx={{ p: 3, borderRadius: "10px" }}>
        <TableContainer
          component={Paper}
          sx={{
            width: "calc(100% - 20px)",
            overflow: "hidden",
            borderBottomLeftRadius: 15,
            bottom: 0,
          }}
        >
            <Table>
              <TableHead>
                <TableRow>
                  <TableCell
                    align="center"
                    sx={{ width: "150px", fontWeight: 700 }}
                  >
                    Worker
                  </TableCell>
                  <Box
                    sx={{
                      position: "relative",
                      display: "flex",
                      alignItems: "center",
                      borderBottom: "1px solid rgba(224, 224, 224, 1)",
                    }}
                  >
                    <span
                      style={{ cursor: "pointer", marginTop: 7 }}
                      onClick={previous}
                    >
                      {" "}
                      <FaArrowLeft />
                    </span>
                    <Box
                      ref={boxRef}
                      sx={{ width: "calc(100% - 20px)", overflow: "hidden" }}
                    >
                      {time.map((item, index) => {
                        return (
                          <TableCell
                            key={index}
                            id={index}
                            sx={{ minWidth: 20, borderBottom: "none" }}
                          >
                            {item}
                          </TableCell>
                        );
                      })}
                    </Box>
                    <span
                      style={{
                        marginTop: 7,
                        cursor: "pointer",
                        position: "absolute",
                        right: 10,
                      }}
                      onClick={next}
                    >
                      {" "}
                      <FaArrowRight />
                    </span>
                  </Box>
                </TableRow>
              </TableHead>
              {workers.map((item, index) => {
                return (
                  <TableBody>
                    <Box
                      ref={addToRef}
                      sx={{
                        width: "calc(100% - 20px)",
                        overflow: "hidden",
                        position: "relative",
                        top: 1,
                      }}
                    >
                      {time.map((timeV, index) => {
                        return (
                          <TableCell
                            key={index}
                            id={index}
                            align="left"
                            sx={{
                              verticalAlign: "middle",
                              height: 77,
                              minWidth: 100,
                              p: 0.7,
                              borderRight: "1px solid rgba(224,224,224,1)",
                            }}
                          >
                            {item.assignWorks.map((work, index) => {
                              var mStart = moment(work.assignDetails.startTime);
                              var roundUpStartTime =
                                mStart.minute() ||
                                mStart.second() ||
                                mStart.millisecond()
                                  ? mStart.add(1, "hour").startOf("hour")
                                  : mStart.startOf("hour");
                              var width =
                                work.assignDetails.timeDiff == 0
                                  ? 106
                                  : work.assignDetails.timeDiff * 106;
                              let count = 0;
                              if (
                                roundUpStartTime.format("hh:mm A") === timeV
                              ) {
                                count += 1;
                                return (
                                  <Box key={index}>
                                    {(work.assignDetails.status === "pending" ||
                                      work.assignDetails.status ===
                                        "request") && (
                                      <Chip
                                      onClick={() => {
                                        setSelectedJob(work._id);
                                        setShowEditJob(true);
                                      }}
                                        label={work.name}
                                        sx={{
                                          mb: 2,
                                          borderRadius: "5px",
                                          fontWeight: 600,
                                          backgroundColor: `${colors.chip.lightBlue}`,
                                          color: `${colors.chip.Blue}`,
                                          width: width - 12,
                                        }}
                                      />

                            )}
                          </TableCell>
                        );
                      })}
                    </Box>
                  </TableBody>
                );
              })}
            </Table>
        </TableContainer>
      </Box>
    </Fragment>
  );
};

我試圖應用下一個和上一個邏輯它不起作用。 我唯一想要的是，如果我單擊 prev，refs 應該會相應地工作。

Answer 1

我在您的代碼中看到的一個問題是您在addToRef function 中使用boxRef2.current = [] 。這將在每次調用addToRef function 時重置boxRef2.current數組。 要解決此問題，您可以使用concat方法將新元素添加到現有的boxRef2.current數組中。