箭头函数不是函数。是数组的一个实例。反应原生钩子

Question

我得到了这个使用套接字的钩子设置import { useEffect, useState, useRef, useContext } from 'react';import useSocket from './useSocket';export default useMarkers = () => {  const [markers, setMarkers] = useState([]);  const [socket] = useSocket();  useEffect(() => {    socket.on('all markers', allMarkers => {      setMarkers([...allMarkers]);    });  }, [setMarkers]);  const addMarker = marker => {    socket.emit('add marker', marker);  };  return [markers, addMarker];};然后我试图在我的其他钩子之一中调用 addMarker 函数，例如：const [addMarker] = useMarkers();addMarker(address);...但是，我收到一个错误：addMarker is not a function. (In 'addMarker(address)', 'addMarker' is an instance of Array)我在这里想念什么？

Answer 1

这是您要返回的数组：

返回[标记，添加标记]；

其中的第一个元素是markers数组。其中的第二个元素是addMarker函数。

const [addMarker] = useMarkers();

在这里，您将第一个元素分配给addMarker并丢弃第二个元素。

---

数组解构是基于索引而不是最初用于填充数组的变量的名称。

Answer 2

与对象解构不同，数组解构不保留变量名（因为数组没有键名，它们有数字）。所以当你这样做时：

const [addMarker] = useMarkers();

您分配markers给addMarker：

return [markers, addMarker];

           |

           |

           v

const  [addMarker] = useMarkers();

混淆来自这样一个事实，即有两个单独的变量都称为addMarker不同的事物。

要修复它，请将第二个元素分配给addMarker：

const [ ignored, addMarker ] = useMarkers();

或者使用对象解构：

return { markers, addMarker }

// then later:

const { addMarker } = useMarkers();