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

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

这是您要返回的数组：

return [markers, addMarker];

里面的第一个元素就是markers数组。其中的second元素就是addMarker函数。

const [addMarker] = useMarkers();

此处您将 第一个 元素分配给 addMarker 并丢弃第二个元素。

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

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();

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

Arrow function is not a function. is an instance of Array. React-native hooks

javascript

hook

react-native