Question

此应用程序有效。我看不到任何性能问题，但确实收到此警告。

警告：

警告：无法在现有状态转换过程中（例如在render内进行更新）。渲染方法应该纯粹是props和state的函数。

问题内的功能：

getUserLogged = (newUser) => {
    this.setState ({
        userLogged : newUser,
        isUserLogged : true
    })
}

这是在我的主应用程序中使用的

class App extends Component {
    constructor() {
        super();
        this.state = {
            users:[],
            userLogged : null,
            isUserLogged: false,
            isAdmin : false,
        };
    }

在我的应用程序组件中，我显示3个主要组件之一：OderPage，AdminPanel或LoginPanel。

如果isUserLogged为空，则显示

<div className="loginPrompt">
  <LoginPage getUserLogged={this.getUserLogged} users = {this.state.users} getAdminLogged = {this.getAdminLogged}/>
</div>

在我的登录组件内部，显示用户按下的引脚面板，并将引脚与数据库中保存的引脚进行比较。

如果它们匹配，我们就叫getUserLogged：

if (checkPin === tempPin) {
   this.props.getUserLogged(user);
}

调用该函数后，主应用程序的状态发生了变化，这将呈现一个新组件（订单页），而不再呈现旧组件（登录）。

此应用程序。我看不到任何性能问题，但确实收到此警告。有什么建议吗？

编辑（更多详细信息）：

我的应用程序组件呈现的方式是将组件呈现为一个数组，显示如下：

    return (
        <div className="App">
            {whichRender}
        </div>
    )

使用getUserLogged和登录面板的if语句：

var whichRender = [];
if (this.state.isUserLogged) {
    whichRender.push (
        <div className="AppContainer" key={this.state.userLogged.name}>
            <MainNav user={this.state.userLogged.name} handleLogOut = {this.handleLogOut}/>
            <OrderPage user={this.state.userLogged.name} handleLogOut = {this.handleLogOut}/>     
        </div>
    )
} else {
    whichRender.push (
        <div className="AppContainer" key={'loginPromptApp'}>
            <div className="loginPrompt">
                <LoginPage getUserLogged={this.getUserLogged} users = {this.state.users} getAdminLogged = {this.getAdminLogged}/>
            </div> 
        </div>
    )
}

在要删除的组件中使用功能-状态转换警告

0 个答案: