Question

我正在使用React和NextJS。我想要的是将有关用户的数据发送到我的所有页面，并且这样做是在使用上下文。事实是，我是从api获取用户数据的，似乎我的页面中没有更新的数据。这是我的app.js：

...
import Header from '../component/header'
export default class MyApp extends App {
    state = {
        username: null
    };
    componentDidMount() {
        fetch('API-URL', details_no_care)
            .then(response => response.json())
            .then(data => this.setState({username : data}));
    }
    render() {
        const {Component, pageProps} = this.props;
        return (
            <React.Fragment>
                <Head>
                    <title>My title</title>
                </Head>
                <UserContext.Provider value={{username : this.state.username}}>
                        <Header/>
                        <Component {...pageProps} />
                </UserContext.Provider>
            </React.Fragment>
        );
    }

}

这是我的UserContext：

import React from "react";
export const UserContext = React.createContext(
);

还有我的header.js：

class header extends React.Component {
    constructor(props, context) {
        super(props,context);
        this.state = {
            username: context.username
        }
    }
    render () {
        return ( 
            <React.Fragment>
                 {this.state.username}
            </React.Fragment>
        )
    }
}

但是它从不显示任何内容。

我100％确信数据可以从应用程序发送到标题。因为如果我在username中用“ toto”初始化app.js，它将显示“ toto”。

如果我在console.log(this.context.username)中componentDidUpdate，我确实拥有正确的数据。但是反应不会让我在this.setState

中做一个componentDidUpdate

Answer 1

所以我找到了解决方案。我没有使用状态。在我使用this.state.user的任何地方，我都将其替换为this.context.user。看起来正在运作。不要犹豫告诉我这是不好的做法还是什么！

Answer 2

这是一种传统方法...但是，尚未弃用！

您缺少在使用者（Header组件）中声明contextType

class Header extends Component {
  static contextType = UserContext;// you are missing this one
  constructor(props, context) {
    super(props, context);
    this.state = {
      username: context.username
    };
  }
  render() {
    console.log(this.state.username);
    return <React.Fragment>{this.state.username}</React.Fragment>;
  }
}

用获取的数据来响应上下文

2 个答案: