Question

我创建了一个学习ReactJS的应用程序。不幸的是，当我尝试使用上下文时，在渲染时出现了1个错误，但是我的应用编译良好。

这是我的代码：

apiVersion: v1
kind: Service
metadata:
  name: mysql
spec:
  #type: NodePort
  ports:
  - port: 3306
    #targetPort: 3306
    #nodePort: 31000
  selector:
    app: mysql
  clusterIP: None
---
apiVersion: v1    
kind: Secret
metadata:
  name: mysql-secret
type: Opaque
data:
  MYSQL_ROOT_PASSWORD: cGFzc3dvcmQ= #password
  MYSQL_DATABASE: dGVzdA== #test
  MYSQL_USER: dGVzdHVzZXI= #testuser
  MYSQL_PASSWORD: dGVzdDEyMw== #test123
---
apiVersion: v1
kind: PersistentVolumeClaim
metadata:
  name: mysql-pv-claim
spec:
  accessModes:
    - ReadWriteOnce
  resources:
    requests:
      storage: 5Gi
---
apiVersion: apps/v1
kind: Deployment
metadata:
  name: mysql
spec:
  selector:
    matchLabels:
      app: mysql
  strategy:
    type: Recreate
  template:
    metadata:
      labels:
        app: mysql
    spec:
      containers:
      - image: mysql:5.7
        name: mysql
        env:
          # Use secret in real usage
        - name: MYSQL_ROOT_PASSWORD
          valueFrom:
              secretKeyRef:
                name: mysql-secret
                key: MYSQL_ROOT_PASSWORD
        - name: MYSQL_DATABASE
          valueFrom:
              secretKeyRef:
                name: mysql-secret
                key: MYSQL_DATABASE
        - name: MYSQL_USER
          valueFrom:
              secretKeyRef:
                name: mysql-secret
                key: MYSQL_USER
        - name: MYSQL_PASSWORD
          valueFrom:
              secretKeyRef:
                name: mysql-secret
                key: MYSQL_PASSWORD          
        ports:
        - containerPort: 3306
          name: mysql
        volumeMounts:
        - name: mysql-persistent-storage
          mountPath: /var/lib/mysql
      volumes:
      - name: mysql-persistent-storage
        persistentVolumeClaim:
          claimName: mysql-pv-claim

这是错误： updateContextConsumer http://localhost:3000/static/js/bundle.js:20927:23

import React, {Component} from 'react';

const LoginContext = React.createContext(null);

const user = {
    isLoggedIn: true,
    username: 'test',
};

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoggedIn: false,
            user: user,
        };
    }

    render() {
        return (
            <LoginContext.Provider user={this.state.user}>
                 <Welcome/>
            </LoginContext.Provider>
        );
        }
    }

class Welcome extends Component {
    render() {
        return (
            <div>
                <WelcomeText/>
            </div>
        );
    }
}

class WelcomeText extends Component {
    render() {
        return (
            <LoginContext.Consumer>
                <div>
                    {(user) => (<p>{user.username}</p>)}
                </div>
            </LoginContext.Consumer>
        );
    }
}

export default App;

您能帮我解决这个问题吗？

Answer 1

ContextProvider需要一个名为value的道具，而不是user

  <LoginContext.Provider value={this.state.user}>
        <Welcome/>
  </LoginContext.Provider>

此外，上下文使用者将子级作为函数而不是div

class WelcomeText extends Component {
    render() {
        return (
            <LoginContext.Consumer>
                  {(user) => (<div><p>{user.username}</p></div>)}
            </LoginContext.Consumer>
        );
    }
}

Answer 2

我目前正在研究React-16.8.6，并且有一个有趣的错误。我不确定这是否是已知问题，但是每当在两个字符'}'和'<'之间有空格时，都会遇到相同的错误，正如您在第30行看到的那样。

在（1）删除空格或（2）用完全换行后，解决了该问题。

即使我非常喜欢React，但它并不完美，我们可以一起做得更好。

在渲染时反应上下文错误

2 个答案: