反应上下文提供者返回未定义为组件答案

【问题标题】：react context provider return undefine as component反应上下文提供者返回未定义为组件
【发布时间】：2021-01-19 11:29:20
【问题描述】：

这是我第一次在 Reactjs 中使用上下文并遇到这个问题错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。检查App的渲染方法`

FeedbackContext.js


import React from "react";
const defaultValue = {
    uid: null,
    title: null,
    appName: null,
    type: null,
    feedbackDescription: null,
}

 const  FeedbackContext = React.createContext({
    selectedFeedback: defaultValue,
    updateSelectedFeedback: () => {}

});

export default FeedbackContext ;

App.js

import React from "react";
import './App.css';
import MainNav from "./componets/Navbar/MainNav";
import firebase from './config/fbConfig';
import RoutersContainer from "./AppRouters/RoutersContainer";
import FeedbackContext from "./contextApi/FeedbackContext";

class App extends React.Component {


    constructor(props) {
        super(props);
        this.state = {
            userType: 'undefined',
            selectedFeedback: {
                uid: null,
                title: null,
                appName: null,
                type: null,
                feedbackDescription: null,
            }
        }
    }

    componentDidMount() {
        firebase.auth().onAuthStateChanged(user => {
            if (user) {
                this.setState({userType: 'login'})
            } else {
                this.setState({userType: 'logout'})
            }
        })
    }

    updateSelectedFeedback = (feedback) => {
        this.setState({selectedFeedback: feedback})
    }


    render() {
        return (
            <FeedbackContext.provider value={{
                selectedFeedback: this.state.selectedFeedback,
                updateSelectedFeedback: this.updateSelectedFeedback
            }}>
                <div className="App">
                    <MainNav userType={this.state.userType}/>
                    <RoutersContainer userType={this.state.userType}/>


                    {/*this button only on test mode*/}
                    <button onClick={() => {
                        {
                            if (this.state.userType === 'admin') {
                                this.setState({userType: "login"})
                            } else if (this.state.userType === 'login') {
                                this.setState({userType: "admin"})
                            }
                        }
                    }}
                    >
                        he is {this.state.userType}
                    </button>

                </div>
            </FeedbackContext.provider>
        );

    }
}



export default App

ShowButton.js

import React from "react";
import FeedbackContext from "../../contextApi/FeedbackContext";
class ShowButton extends React.Component {


    render() {
        return (

            <FeedbackContext.consumer>
                {({updateSelectedFeedback ,selectedFeedback }) => <>
                <button onClick={updateSelectedFeedback(this.props.feedback)}>Show</button>
                    {console.log(selectedFeedback)}
                </>}
            </FeedbackContext.consumer>



        )
    }
}

export default ShowButton

【问题讨论】：

标签： javascript reactjs react-context

【解决方案1】：

它的消费者应该是资本。

//....
render() {
        return (

            <FeedbackContext.Consumer>
                {({updateSelectedFeedback ,selectedFeedback }) => <>
                <button onClick={updateSelectedFeedback(this.props.feedback)}>Show</button>
                    {console.log(selectedFeedback)}
                </>}
            </FeedbackContext.Consumer>



        )
    }
}

【讨论】：

【解决方案2】：

问题解决了……消费者和提供者应该稍后再开始

【讨论】：