Реагировать: Контекст для передачи состояния между двумя иерархиями компонентов

Question

Я занимаюсь разработкой веб-сайта, на котором я хочу иметь доступ к информации о состоянии в любом месте приложения.Я пробовал несколько способов реализации состояния, но всегда получаю следующее сообщение об ошибке:

Недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено:не определено.Вы, вероятно, забыли экспортировать свой компонент из файла, в котором он определен, или вы перепутали импорт по умолчанию и имена.

Проверьте метод рендеринга SOS.

Вот мой SOS-> файл index.js:

import React, { useContext } from 'react';
import axios from 'axios';
import CONST from '../utils/Constants';
import { Grid, Box, Container } from '@material-ui/core';
import { styled } from '@material-ui/styles';
import { Header } from '../Layout';
import ListItem from './ListItem';
import SOSButton from './SOSButton';
import FormPersonType from './FormPersonType';
import FormEmergencyType from './FormEmergencyType';
import StateContext from '../App';
import Context from '../Context';

export default function SOS() {
  const { componentType, setComponentType } = useContext(Context);
  const timerOn = false;
  //'type_of_person',
  const ambulance = false;
  const fire_service = false;
  const police = false;
  const car_service = false;

  //static contextType = StateContext;
  const showSettings = event => {
    event.preventDefault();
  };

  const handleComponentType = e => {
    console.log(e);
    //this.setState({ componentType: 'type_of_emergency' });
    setComponentType('type_of_emergency');
  };

  const handleEmergencyType = new_emergency_state => {
    console.log(new_emergency_state);
    //   this.setState(new_emergency_state);
  };

  const onSubmit = e => {
    console.log('in OnSubmit');
    axios
      .post(CONST.URL + 'emergency/create', {
        id: 1,
        data: this.state //TODO
      })
      .then(res => {
        console.log(res);
        console.log(res.data);
      })
      .catch(err => {
        console.log(err);
      });
  };

  let component;

  if (componentType == 'type_of_person') {
    component = (
      <FormPersonType handleComponentType={this.handleComponentType} />
    );
  } else if (componentType == 'type_of_emergency') {
    component = (
      <FormEmergencyType
        handleComponentType={this.handleComponentType}
        handleEmergencyType={this.handleEmergencyType}
        emergencyTypes={this.state}
        timerStart={this.timerStart}
        onSubmit={this.onSubmit}
      />
    );
  }
  return (
    <React.Fragment>
      <Header title="Send out SOS" />
      <StateContext.Provider value="type_of_person" />
      <Container component="main" maxWidth="sm">
        {component}
      </Container>
      {/*component = (
        <HorizontalNonLinearStepWithError
          handleComponentType={this.handleComponentType}
        />*/}
    </React.Fragment>
  );
}

Буду очень признателен за вашу помощь!

Просто для справки, файл контекста определяется следующим образом:

import React, { useState } from 'react';

export const Context = React.createContext();

const ContextProvider = props => {
  const [componentType, setComponentType] = useState('');
  setComponentType = 'type_of_person';
  //const [storedNumber, setStoredNumber] = useState('');
  //const [functionType, setFunctionType] = useState('');
  return (
    <Context.Provider
      value={{
        componentType,
        setComponentType
      }}
    >
      {props.children}
    </Context.Provider>
  );
};

export default ContextProvider;

РЕДАКТИРОВАТЬ: я изменил свой код в соответствии с вашими предложениями (обновлено выше).Но теперь я получаю следующую ошибку: TypeError: Невозможно прочитать свойство 'componentType' из неопределенного

Answer 1

Context не является экспортом по умолчанию из вашего ../Context файла, поэтому вы должны импортировать его как:

import { Context } from '../Context';

В противном случае он пытается импортировать ваш Context.Provider компонент.

Для вашей файловой структуры / наименования правильное использование:

// Main app file (for example)
// Wraps your application in the context provider so you can access it anywhere in MyApp
import ContextProvider from '../Context'

export default () => {
  return (
    <ContextProvider>
      <MyApp />
    </ContextProvider>
  )
}

// File where you want to use the context
import React, { useContext } from 'react'
import { Context } from '../Context'

export default () => {
  const myCtx = useContext(Context)

  return (
    <div>
      Got this value - { myCtx.someValue } - from context
    </div>
  )
}

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