React 中不显示多条折线

Question

我正在尝试创建一个应用程序来练习绘制汉字。我正在使用 svg 来绘制线条。我可以画一条折线，但它都是相连的。我需要绘制多条单独的线。我为每条线使用二维点数组。当我创建行数组时，它不会渲染任何内容。它不会渲染任何线条或基本形状，我什至尝试了

标签只是为了看看是否渲染了什么。

我尝试直接在 box svg 中渲染并在单独的函数中渲染。此处显示单独的功能。我不确定为什么单行渲染，但我无法让二维数组渲染任何内容。数据似乎确实传输正确（即我从数组中获取 x 和 y 点）。

代码：

    import { useState, useEffect } from "react";

export default DrawKanji = ({ advance, randomSet }) => {
  const [stroke, setStroke] = useState([]);
  const [kanji, setKanji] = useState([]);
  const [draw, setDraw] = useState(false);

  useEffect(() => {
    console.log("run");
  }, [kanji, stroke]);

  const clearPractice = () => {
    setKanji([]);
  };

  const handleMouseDown = (event) => {
    const { clientX, clientY } = event;
    //let offset = document.getElementById("svg").getBoundingClientRect();
    setDraw(true);
    /*
    setPoints([
      ...points,
      { x: clientX - offset.left, y: clientY - offset.top },
    ]);*/
  };

  const handleMouseMove = (event) => {
    const { clientX, clientY } = event;
    let offset = document.getElementById("svg").getBoundingClientRect();
    if (draw) {
      setStroke([
        ...stroke,
        { x: clientX - offset.left, y: clientY - offset.top },
      ]);
    }
  };

  const handleMouseUp = () => {
    //setPoints([]);
    let newKanji = kanji;
    newKanji.push(stroke);
    setKanji(newKanji);
    setStroke([]);
    console.log(`kanji: ${JSON.stringify(kanji)}`);
    setDraw(false);
  };

  const drawLine = (
    <>
      {kanji.forEach((line) => {
        <polyline
          point={line.map((point) => `${point.x},${point.y}`).join(" ")}
        />;
      })}
    </>
  );
 
  return (
    <>
      <p>{`${JSON.stringify(stroke[1])}`}</p>
      <button onClick={advance} name="previous" disabled={randomSet}>
        Previous
      </button>
      <svg
        id="svg"
        onMouseDown={handleMouseDown}
        onMouseMove={handleMouseMove}
        onMouseUp={handleMouseUp}
        width="109px"
        hanging="100px"
        style={{ border: "1px solid black" }}
      >
        {drawLine}
      </svg>
      <button onClick={advance} name="next">
        Next
      </button>
      <p>
        <button onClick={clearPractice}>Clear</button>
      </p>
    </>
  );
};

预先感谢您提供的任何帮助或建议。

Answer 1

我确实设法让它工作。我认为有一些拼写错误，并使用了几种新的数据传输方式。如果有人感兴趣的话，这是代码。

import { useState, useEffect } from "react";

export default DrawKanji = ({ advance, randomSet }) => {
  const [stroke, setStroke] = useState([]);
  const [kanji, setKanji] = useState([]);
  const [draw, setDraw] = useState(false);

  const clearPractice = () => {
    setKanji([]);
  };

  const handleMouseDown = (event) => {
    const { clientX, clientY } = event;
    setDraw(true);
  };

  const handleMouseMove = (event) => {
    const { clientX, clientY } = event;
    let offset = document.getElementById("svg").getBoundingClientRect();
    if (draw) {
      setStroke([
        ...stroke,
        { x: clientX - offset.left, y: clientY - offset.top },
      ]);
    }
  };

  const handleMouseUp = () => {
    let newKanji = kanji;
    let line = stroke.map((point) => `${point.x},${point.y}`).join(" ");
    newKanji.push([line]);
    setKanji(newKanji);
    setStroke([]);
    console.log(`kanji: ${JSON.stringify(kanji)}`);
    setDraw(false);
  };
  const drawKanji = () => {
    let testData = [];
    kanji.map((x) => {
      testData.push(
        <polyline points={x} stroke="black" strokeWidth="4" fill="none" />
      );
    });
    return testData;
  };

  const drawLine =
    (console.log(`stoke: ${JSON.stringify(stroke)}`),
    (
      <polyline
        points={stroke.map((point) => `${point.x},${point.y}`).join(" ")}
        stroke="black"
        strokeWidth="4"
        fill="none"
      />
    ));

  return (
    <>
      <p>{`${JSON.stringify(stroke[1])}`}</p>
      <button onClick={advance} name="previous" disabled={randomSet}>
        Previous
      </button>
      <svg
        id="svg"
        key="svg"
        onMouseDown={handleMouseDown}
        onMouseMove={handleMouseMove}
        onMouseUp={handleMouseUp}
        width="109px"
        hanging="100px"
        style={{ border: "1px solid black" }}
      >
        {drawLine}
        {drawKanji()}
      </svg>
      <button onClick={advance} name="next">
        Next
      </button>
      <p>
        <button onClick={clearPractice}>Clear</button>
      </p>
    </>
  );
};