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];

其中的 first 元素是markers数组。其中的 second 元素是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();

箭头功能不是功能。是Array的实例。反应本机挂钩

2 个答案: