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

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];           |           |           vconst  [addMarker] = useMarkers();混淆来自这样一个事实，即有两个单独的变量都称为addMarker不同的事物。要修复它，请将第二个元素分配给addMarker：const [ ignored, addMarker ] = useMarkers();或者使用对象解构：return { markers, addMarker }// then later:const { addMarker } = useMarkers();