Блог

У меня есть настройка компонента в маршрутизаторе react, который имеет следующий URL

 http://localhost:3000/editing/5f0d7484706b6715447829a2
  

Компонент вызывается из родительского компонента с помощью

Ошибка относится к первой манипуляции, которую компонент выполняет с данными, что указывает мне, что приложение запущено до того, как данные будут доступны. Этого не происходит нигде в приложении.

 ×
TypeError: Cannot read property 'reduce' of undefined
  

Если я затем обновлю URL-адрес в браузере, он будет работать так, как задумано. Компонент также загружается нормально, если я просто вставляю указанный выше URL-адрес в браузер.

Код приведен ниже

 const Button = (props) => {
  //main props
  const { buttonFunction, buttonIconName, buttonStyle, visible } = props;


  return (
        <Link
        to='./editing/' props.documentId}
        </Link>

  );
};


export default Button;

  

Вызываемый компонент находится ниже

 mport React, { useContext, useEffect } from 'react';
import DocumentEditor from '../documentEditor/documentEditor';
import DocumentContext from '../../context/Document/DocumentContext';
import Spinner from '../layout/Spinner';



//For testing this Id works
// 5f0d7484706b6715447829a2

//Wrappers

const Editing = ({ match }) => {

  //styling
  const documentContext = useContext(DocumentContext);
  const { Documents, myFiltered, getDocuments, loading, getDocument } = documentContext;


  useEffect(() => {
    getDocument(match.params.documentid);
    // eslint-disable-next-line
  }, []);

  return (
    <div>
      {Documents !== null amp;amp; !loading ? (
        <DocumentEditor
          Document={Documents}
          DocumentContext={documentContext}
          documentMode='edit'
        />
      ) : (
        <Spinner />
      )}
    </div>
  );
};
export default Editing;
  

Мои мысли

Я подозреваю, что это может быть связано с загрузкой формы до получения данных, но я не вижу, как код

 {Documents !== null amp;amp; !loading ? (
  

наряду с моими функциями, которые извлекали данные, они работали нормально целую вечность, и использование async / await должно предотвратить это. Может быть, мне не следует использовать ссылку таким образом?

Как говорит @Yousaf в комментариях, ваша конкретная ошибка связана с reduce() вызовом, и мы не видим этого в опубликованном вами коде.

Я вижу, что кажется опечаткой, и это может быть вашей проблемой.

В верхней части вашего файла вы импортируете DocumentContext с большой буквы «D»

 import DocumentContext from '../../context/Document/DocumentContext';
  

И внутри вашего Editing компонента вы разрушаете documentContext строчную букву «d»:

 const { Documents, myFiltered, getDocuments, loading, getDocument } = documentContext;
  

Это приведет ко { Documents, myFiltered, getDocuments, loading, getDocument } всему сущему undefined . Затем вы передаете Documents и documentContext в DocumentEditor , который, предположительно, пытается вызвать reduce() одну из тех вещей, которые передаются, которые есть undefined .