仅使用ImageMapper组件（React-Img-Mapper）设置状态的故障设置状态

Question

我正在尝试使用 reaction-img-mapper的ImageMapper组件创建交互式图像映射（基于 consclion> clickarea 进行更新 clickedareas 状态。

在该应用程序中，我呈现一个带有复选标记的列表，当相应的列表项目包含在 clickedareas 状态中时，复选标记变为绿色。

我致电 clickarea 通过 onclick 在列表项目本身上可以按预期工作，但是当我通过Imagemapper onclick prop ，我很难弄清原因。

---

---

这是一个屏幕记录，显示了动作差异。

注意： ImageMapper OnClick似乎正在使用最初设置的状态（ usestate（[]）），因为当我最初给它带有元素的数组时，它只是将其与该元素一起使用。 /em>

以下是有关来自React-Img-Mapper文档的OnClick Prop 的屏幕截图

---

---

这是我代码的屏幕截图：

---

---

这也是我的代码：

import React, { useState } from "react"
import ImageMapper from 'react-img-mapper';


function ImageMapQQ(props) {

  const URL = "../images/qqmap.png"
  const MAP = {
    name: "qq-map",
    areas: [
      { id: "NW1/4NW1/4", title: "NW1/4NW1/4", name: "NW1/4NW1/4", shape: "rect", coords: [0,0,50,50] },
      { id: "NE1/4NW1/4", title: "NE1/4NW1/4", name: "NE1/4NW1/4", shape: "rect", coords: [50,0,100,50] },
      { id: "NW1/4NE1/4", title: "NW1/4NE1/4", name: "NW1/4NE1/4", shape: "rect", coords: [100,0,150,50] },
      { id: "NE1/4NE1/4", title: "NE1/4NE1/4", name: "NE1/4NE1/4", shape: "rect", coords: [150,0,200,50] },

      { id: "SW1/4NW1/4", title: "SW1/4NW1/4", name: "SW1/4NW1/4", shape: "rect", coords: [0,50,50,100] },
      { id: "SE1/4NW1/4", title: "SE1/4NW1/4", name: "SE1/4NW1/4", shape: "rect", coords: [50,50,100,100] },
      { id: "SW1/4NE1/4", title: "SW1/4NE1/4", name: "SW1/4NE1/4", shape: "rect", coords: [100,50,150,100] },
      { id: "SE1/4NE1/4", title: "SE1/4NE1/4", name: "SE1/4NE1/4", shape: "rect", coords: [150,50,200,100] },

      { id: "NW1/4SW1/4", title: "NW1/4SW1/4", name: "NW1/4SW1/4", shape: "rect", coords: [0,100,50,150] },
      { id: "NE1/4SW1/4", title: "NE1/4SW1/4", name: "NE1/4SW1/4", shape: "rect", coords: [50,100,100,150] },
      { id: "NW1/4SE1/4", title: "NW1/4SE1/4", name: "NW1/4SE1/4", shape: "rect", coords: [100,100,150,150] },
      { id: "NE1/4SE1/4", title: "NE1/4SE1/4", name: "NE1/4SE1/4", shape: "rect", coords: [150,100,200,150] },

      { id: "SW1/4SW1/4", title: "SW1/4SW1/4", name: "SW1/4SW1/4", shape: "rect", coords: [0,150,50,200] },
      { id: "SE1/4SW1/4", title: "SE1/4SW1/4", name: "SE1/4SW1/4", shape: "rect", coords: [50,150,100,200] },
      { id: "SW1/4SE1/4", title: "SW1/4SE1/4", name: "SW1/4SE1/4", shape: "rect", coords: [100,150,150,200] },
      { id: "SE1/4SE1/4", title: "SE1/4SE1/4", name: "SE1/4SE1/4", shape: "rect", coords: [150,150,200,200] },
    ]
  }

  const areas = MAP.areas
  const [clickedAreas, setClickedAreas] = useState([])

  function clickArea(id) {
    console.log("clickedAreas: ", clickedAreas)

    if (clickedAreas.includes(id)) {
      console.log("includes")
      setClickedAreas(() => clickedAreas.filter(el => el != id))
    }
    else {
      console.log("doesn't include")
      setClickedAreas(() => [...clickedAreas, id])
    }
  }

  return (
    <>
      <ImageMapper src={URL} map={MAP}
        stayMultiHighlighted={true}
        toggleHighlighted={true}
        fillColor={"rgba(150, 213, 255, 0.6)"}

        onClick={(area) => clickArea(area.id)} // THIS ONCLICK ISN'T WORKING CORRECTLY
      />

      <div className="bold">AREAS</div>
      {areas.map(area =>
          <>
          <div className="d-flex pointer" onClick={() => clickArea(area.id)}> {/* THIS ONCLICK IS WORKING CORRECTLY */}
            <i className={`fas fa-check-circle ${clickedAreas.includes(area.id) ? "text-green" : "text-black opacity-10"}`}></i>
            <div key={area.id}>{area.id}</div>
          </div>
          </>
        )
      }
    </>
  )
}

export default ImageMapQQ

Answer 1

我仍然不知道为什么它没有原始写作，并且如果有人得到它，仍然会对它有更多的见解。

最终，ImageMapper OnClick只要单击一次点击时就一直使用初始状态（空数组） - 我可以说这是因为我有console.log当前 clickedareas 在 ClickArea 单击图像映射时称为功能。

它似乎会更新状态（因为相应的检查标记变为绿色），但是每次调用ImageMapper OnClick函数时，它似乎总是从初始状态开始（Console.Log每次显示空数组）。

所有人都说，我找到了解决方法，可以根据需要进行工作。

而不是ImageMapper onClick调用 clickarea apeariD ），触发使用效率，然后调用 clickarea 函数，该功能后来设置了我实际想使用的状态，大声笑。 hacky，但起作用。

（在每次点击时添加纳米型以使其独特，以便 setareAid 在Imagemapper OnClick中始终运行 - 如果我刚有aket.id。 。状态）

小红色圆圈1-3是代码的新部分：