Функция стрелки не является функцией. это экземпляр массива. Реактивно-родные крючки - PullRequest
Новая
       8

Функция стрелки не является функцией. это экземпляр массива. Реактивно-родные крючки

0 голосов
/ 21 марта 2020

Я получил эту настройку ловушек, которая использует сокеты 

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)

Что мне здесь не хватает?

Ответы [ 2 ]

0 голосов
/ 21 марта 2020

Деструктуризация массива, в отличие от деструктурирования объектов, не сохраняет имен переменных (потому что у массивов нет имен для ключей, у них есть номера). Поэтому, когда вы делаете: 

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();
0 голосов
/ 21 марта 2020

Это массив, который вы возвращаете:

return [markers, addMarker];

Элемент первый в нем является markers массив. второй элемент в нем является функцией addMarker.

const [addMarker] = useMarkers ();

Здесь вы назначаете первый элемент в addMarker и отбрасывание второго элемента.

Деструктуризация массива основана на index , а не на имени переменная, которая использовалась для заполнения массива.

...