反应:在两个组件的两个层次结构之间传递状态的上下文

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：无法读取未定义的

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>
  )
}

and godsakes ...重命名您的上下文文件，提供商以及其中的所有内容。我甚至写了这个。