javascript - 功能组件中的 setState 不保留值

Question

我有一个保持状态的功能组件。我尝试使用 SVG 中的 onClick 事件来操纵这种状态。 SVG 位于另一个组件中，并通过 props 传递了 addAndRemoveSelectedCabin 方法。我循环访问 useEffect 中的元素并添加一个 eventListener。这是行不通的。具有 selectedCabins 依赖项的 useEffect 仅记录新号码。似乎每次 stateChange 之后状态都会返回到初始状态。

这是父组件中的状态和方法。

const [selectedCabins, setSelectedCabins] = useState([0]);

const addRemoveSelectedCabin = id => {
  const newArr = [...selectedCabins, id];

  setSelectedCabins(newArr);
}

useEffect(() => {
  console.log(selectedCabins);
}, [selectedCabins])

这就是我调用该方法的方式。 [更新]

useEffect(() =>
{
  const cabins = document.querySelectorAll(".cabin");

  cabins.forEach(cabin =>
  {
    const id = cabin.getAttributeNS(null, "id").substring(1, 5);
    const found = cabinsData.find(el => el.id === id)
    if (found && found.status === "available")
    {
      cabin.classList.add("green")
      cabin.addEventListener('click', () => addRemoveSelectedCabin(id));
    } else if (found && found.status === "booked")
    {
      cabin.classList.add("gray")
    }
  })
}, [])

控制台:

[0]

(2) [0, "1105"]

(2) [0, "1101"]

如果我将 onClick 直接放在 SVG 元素中，这就会起作用。有谁知道这是为什么吗？

<rect
  id="C1105"
  x="749.4"
  y="58.3"
  className="cabin"
  width="36.4"
  height="19.9"
  onClick={() => addRemoveSelectedCabin(1105)}
>
  <title>1105</title>
</rect>

Answer 1

正如我在评论中所说，您在第一次渲染中绑定(bind) addRemoveSelectedCabin 。 useEffect 仅执行一次，因为您传递了一个空的依赖项列表。 addRemoveSelectedCabin 关闭 selectedCabins，此时其值为 [0]。

Why am I seeing stale props or state inside my function? React 文档中有更多关于此的信息。

您的情况的解决方案很简单:将函数传递给 setter 以获取“当前”状态值。不要引用组件中的状态值:

const addRemoveSelectedCabin = id => {
  setSelectedCabins(selectedCabins => [...selectedCabins, id]);
}

<小时/>

话虽如此，这在 React 世界中仍然是一件奇怪的事情。您应该重新评估那些让您认为必须这样做的假设。

It's not all the elements that should have a click listener.

这很容易做到，具体取决于您实际渲染元素的方式。 JSX/React 只是 JavaScript。无论是否有添加事件处理程序的条件，或者是否有设置 onClick 的条件，基本上都是相同的。

但是如果没有更完整的示例，我们就没有太多建议。