Javascript 箭头函数不是一个函数。是数组的一个实例。反应本机钩子

我得到了这个使用套接字的钩子设置

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)

---

我在这里遗漏了什么？

这是您要返回的数组：

返回[markers，addMarker]

其中的第一个元素是

标记

数组。第二个元素是

addMarker

函数

常量[addMarker]=useMarkers（）

这里您将第一个元素分配给

addMarker

，并丢弃第二个元素

---

---

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

这是返回的数组：

返回[markers，addMarker]

其中的第一个元素是

标记

数组。第二个元素是

addMarker

函数

常量[addMarker]=useMarkers（）

这里您将第一个元素分配给

addMarker

，并丢弃第二个元素

---

---

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

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

const [addMarker] = useMarkers();

您正在将

标记分配给
addMarker
：

return [markers, addMarker];
           |
           |
           v
const  [addMarker] = useMarkers();

const [ ignored, addMarker ] = useMarkers();

混淆的原因是有两个单独的变量，它们都称为
addMarker
，表示不同的事物

要修复它，请将第二个元素指定给
addMarker
：

return [markers, addMarker];
           |
           |
           v
const  [addMarker] = useMarkers();

const [ ignored, addMarker ] = useMarkers();

或使用对象分解：

return { markers, addMarker }

// then later:

const { addMarker } = useMarkers();

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

const [addMarker] = useMarkers();

您正在将
标记分配给
addMarker
：

return [markers, addMarker];
           |
           |
           v
const  [addMarker] = useMarkers();

const [ ignored, addMarker ] = useMarkers();

混淆的原因是有两个单独的变量，它们都称为
addMarker
，表示不同的事物

要修复它，请将第二个元素指定给
addMarker
：

return [markers, addMarker];
           |
           |
           v
const  [addMarker] = useMarkers();

const [ ignored, addMarker ] = useMarkers();

或使用对象分解：

return { markers, addMarker }

// then later:

const { addMarker } = useMarkers();

这是一个明显的错误，谢谢你指出这一点。隧道视野：）这是一个明显的错误，谢谢你指出这一点。隧道视野：）