使用onClick函数只使用ImageMapper组件设置故障状态( function img-mapper)

Question

我正在尝试使用来自反应-img-映射器的反应-img-映射器组件(基于反应-图像映射器)在ReactJS应用程序中创建一个交互式图像地图。我希望能够单击ImageMapper地图上的“区域”，并根据函数clickArea更新clickedAreas状态。

在这个应用程序中，我呈现一个带有检查点的列表，当相应的列表项包含在clickedAreas状态时，选中标记就变成绿色。

我通过列表项上的clickArea通过onClick调用它，它按照预期工作，但是当我通过ImageMapper onClick prop调用它时，它没有，而且我很难弄清楚原因。

​

这是一个屏幕记录，显示不同的行动。

注意: ImageMapper onClick似乎在使用初始设置状态onClick，因为当我最初给它一个带有元素的数组时，它只是继续使用该元素的初始状态。

这里有一个关于react img文档的onClick道具的屏幕截图

​

​

​

，这是我的代码的屏幕截图：

​

​

​

这里还有我的代码：

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就会继续使用初始状态(空数组) --我可以告诉您这一点，因为在单击图像映射时调用的clickArea函数开始时，它就是当前的clickedAreas状态。

它似乎更新了状态(因为相应的复选标记变成绿色)，但每次调用ImageMapper onClick函数时，它似乎总是从初始状态开始(console.log每次显示空数组)。

说，我已经找到了一个解决办法，使它能按需要工作。

ImageMapper onClick没有调用稍后设置状态的clickArea函数，而是将其更改为立即设置一个不同的状态(areaId)，触发一个useEffect，然后调用clickArea函数，该函数随后设置实际要处理的状态，lol。无趣，但有效。

(在那里添加了纳米线，使其在每次点击时都是唯一的，这样ImageMapper onClick中的area.id函数就会始终运行--如果我只有area.id，如果area.id已经是areaId状态，它就不会运行……)另外，我无法让clickArea函数运行以从clickedAreas状态中删除它)

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

​