上下文更新时调用函数 React答案

【问题标题】：Call a function when context updates React上下文更新时调用函数 React
【发布时间】：2021-08-19 06:02:38
【问题描述】：

我有一个返回另一个函数的函数组件：

function Lobby() {

const user_context = useContext(UserContext)

   return (
        <div>{renderData(user_context.state.data)}</div>
   )
}

export default Lobby;

问题是当 user_context 改变时，Lobby() 没有更新，所以renderData() 没有更新。当 user_context 发生变化时，如何调用这些函数？

（编辑）更多细节：

    <App />
      <UserContext />
        <Lobby />
          <Introduction />
          <Chapter_1 />
          <Chapter_2 />
          <Chapter_3 />

UserContext 包含一个finishChapter 方法，通过用户单击在Introduction 中调用。这告诉UserContext 更新状态中的章节，并将新章节传递给Lobby。

UserContext.js

import React, { createContext, Component } from 'react';
import axios from 'axios';

export const UserContext = createContext();

class UserContextProvider extends Component {

    constructor(props){
        super(props)
        this.state = {
        }
    };

    toggleLoading = () => {
        this.setState({loading: !this.state.loading})
        setTimeout(() => {this.setState({loading: !this.state.loading})}, 1000)
    }

    finishChapter = (chapter) => {
        axios.put(`/narrative/finish_chapter/${chapter}`).then((done)=> {
            this.toggleLoading()
            this.getChapter()
        })
    }

    getChapter = () => {
        axios.get('/narrative/get_narrative').then(result => {
            this.setState({
                chapters_complete: result.data[0].chapters_complete,
                number_ch_complete: result.data[0].chapters_complete.length
            })
        })
    }   

    render() {
        return (
            <UserContext.Provider value={{state: this.state, toggleLoading: this.toggleLoading, finishChapter: this.finishChapter }}>
            {this.props.children}
            </UserContext.Provider>
        )
    }

}

export default UserContextProvider;

将新章节添加到上下文后，我需要Lobby 关闭Introduction 并打开Chapter_1。

现在Lobby 正在接收更新的上下文，我可以在 Chrome 工具中看到它（即：'Chapter_1'），但它从不调用该函数。

【问题讨论】：

user_context在哪里？
我也没有看到user_context，您如何更改上下文值？
我编辑了示例，希望对您有所帮助。并且上下文变化是从另一个组件发生的，所以在这里是不可见的。
renderLobby 不是一个组件。它不是以大写字母开头的。我猜你只是在某个地方调用renderLobby()，而不是像组件一样使用它（例如<RenderLobby />）。如果您将其用作组件，请在 UserContext 更改时使用 know 做出反应以重新渲染它。
能否更新您的问题以包括您如何使用此组件以及如何更新 UserContext？

标签： javascript reactjs react-context

【解决方案1】：

感谢您的反馈，感谢@Cully 确认重新渲染和 UserContext 的工作方式。

最后是数据结构出错了。

不正确：

renderData(user_context.state.data)

正确：

renderData(user_context.state.data.chapters_complete)

非常愚蠢的错误，但有用的反馈使我找到了正确的答案。感谢 SO 社区。p>

【讨论】：