Javascript 从回调内部设置state以呈现React组件中的相关内容

我一直使用条件内容呈现，这取决于值的存在。在组件中，如果没有给出API键，我想用一个按钮显示一个输入。当使用

electron-json-storage

存储API键时，组件将呈现另一个html

我的问题是我无法在构件的构造过程中指定状态

// @flow
import React, { Component } from 'react';
import storage from 'electron-json-storage';
import {
        Button,
        Popover,
        PopoverInteractionKind,
        Position
       } from '@blueprintjs/core';

export default class UserButton extends Component {
  constructor() {
    super();

  // -----------------------------------------------------------
  // HERE - I'm trying to assign keys from storage via callback
  // Unfortunately it doesn't work
  // It throws Cannot read property 'is_loggedin' of null
  // when renders content={loginContent[this.state.is_loggedin]}
  // -----------------------------------------------------------
  storage.get('auth', (error, data) => {
    if (error) throw error;
    this.state = {
      api_key: data.user.api_key,
      is_loggedin: data.user.is_loggedin
    };
  });

    this.handleTextChange = this.handleTextChange.bind(this);
    this.handleSaveClick = this.handleSaveClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
  }

  handleTextChange(e) {
    this.setState({ api_key: e.target.value });
  }

  handleSaveClick() {
    this.setState({ is_loggedin: 1 });

    storage.set('auth', { user: this.state }, function (error) {
      if (error) throw error;
    });

    this.forceUpdate();
  }

  handleLogoutClick() {
    this.setState({ is_loggedin: 0 });

    storage.remove('auth', function (error) {
      if (error) throw error;
    });

    this.forceUpdate();
  }

  render() {
    const loginContent = ([
      // Not logged in
      <div>
        <label className="pt-label .modifier">
          <input
            onChange={this.handleTextChange}
            autoFocus={true}
            className="pt-input modifier"
            type="text"
            placeholder="Your API key"
          />
        </label>

        <Button
          className="pt-intent-primary pt-fill"
          onClick={this.handleSaveClick}
        >
          Save
        </Button>
      </div>,
      // Logged in
      <div>
        <Button
          className="pt-intent-primary pt-fill"
          onClick={this.handleLogoutClick}
        >
          Change API key
        </Button>
      </div>
    ]);

    return (
      <Popover
        content={loginContent[this.state.is_loggedin]}
        interactionKind={PopoverInteractionKind.CLICK}
        position={Position.BOTTOM_RIGHT}
        popoverClassName="pt-popover-content-sizing"
      >
        <Button className="pt-button pt-minimal pt-icon-user" />
      </Popover>
    );
  }
}

/@flow
从“React”导入React，{Component}；
从“electron json存储”导入存储；
进口{
按钮
爆米花，
PopoverInteractionKind，
位置
}来自“@blueprintjs/core”；
导出默认类UserButton扩展组件{
构造函数（）{
超级（）；
// -----------------------------------------------------------
//这里-我正在尝试通过回调从存储器分配密钥
//不幸的是，它不起作用
//它抛出null的无法读取属性“is_loggedin”
//呈现内容时={loginContent[this.state.is_loggedin]}
// -----------------------------------------------------------
storage.get（'auth'，（错误，数据）=>{
如果（错误）抛出错误；
此.state={
api_密钥：data.user.api_密钥，
is_loggedin:data.user.is_loggedin
};
});
this.handleTextChange=this.handleTextChange.bind（this）；
this.handleSaveClick=this.handleSaveClick.bind（this）；
this.handleLogoutClick=this.handleLogoutClick.bind（this）；
}
handleTextChange（e）{
this.setState（{api_key:e.target.value}）；
}
handleSaveClick（）{
this.setState（{is_loggedin:1}）；
storage.set（'auth'，{user:this.state}，函数（错误）{
如果（错误）抛出错误；
});
这个.forceUpdate（）；
}
handleLogoutClick（）{
this.setState（{is_loggedin:0}）；
存储。删除（'auth'，函数（错误）{
如果（错误）抛出错误；
});
这个.forceUpdate（）；
}
render（）{
常量登录内容=([
//未登录
拯救
,
//登录
更改API密钥
]);
返回(
);
}
}

---

如何做到这一点？

您可能在调用回调之前呈现组件，因此

状态仍然为空。您可以在构造函数中添加一个临时的，
is\u loading
状态，在调用回调之前在页面中呈现加载消息/微调器

constructor() {
    super();

    this.state = { is_loading: true };

    storage.get('auth', (error, data) => {
        if (error) throw error;
        this.setState({
            is_loading: false,
            api_key: data.user.api_key,
            is_loggedin: data.user.is_loggedin
        });
    });

    this.handleTextChange = this.handleTextChange.bind(this);
    this.handleSaveClick = this.handleSaveClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
}

// ...

render() {
    // ...

    return (
        <Popover
            content={this.state.is_loading? "<div>Loading...</div>": loginContent[this.state.is_loggedin]}
            interactionKind={PopoverInteractionKind.CLICK}
            position={Position.BOTTOM_RIGHT}
            popoverClassName="pt-popover-content-sizing"
        >
            <Button className="pt-button pt-minimal pt-icon-user" />
        </Popover>
    );
}

constructor（）{
超级（）；
this.state={is_loading:true}；
storage.get（'auth'，（错误，数据）=>{
如果（错误）抛出错误；
这是我的国家({
正在加载：false，
api_密钥：data.user.api_密钥，
is_loggedin:data.user.is_loggedin
});
});
this.handleTextChange=this.handleTextChange.bind（this）；
this.handleSaveClick=this.handleSaveClick.bind（this）；
this.handleLogoutClick=this.handleLogoutClick.bind（this）；
}
// ...
render（）{
// ...
返回(
);
}
您可能在调用回调之前呈现组件，因此
状态仍然为空。您可以在构造函数中添加一个临时的，
is\u loading
状态，在调用回调之前在页面中呈现加载消息/微调器

constructor() {
    super();

    this.state = { is_loading: true };

    storage.get('auth', (error, data) => {
        if (error) throw error;
        this.setState({
            is_loading: false,
            api_key: data.user.api_key,
            is_loggedin: data.user.is_loggedin
        });
    });

    this.handleTextChange = this.handleTextChange.bind(this);
    this.handleSaveClick = this.handleSaveClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
}

// ...

render() {
    // ...

    return (
        <Popover
            content={this.state.is_loading? "<div>Loading...</div>": loginContent[this.state.is_loggedin]}
            interactionKind={PopoverInteractionKind.CLICK}
            position={Position.BOTTOM_RIGHT}
            popoverClassName="pt-popover-content-sizing"
        >
            <Button className="pt-button pt-minimal pt-icon-user" />
        </Popover>
    );
}

constructor（）{
超级（）；
this.state={is_loading:true}；
storage.get（'auth'，（错误，数据）=>{
如果（错误）抛出错误；
这是我的国家({
正在加载：false，
api_密钥：data.user.api_密钥，
is_loggedin:data.user.is_loggedin
});
});
this.handleTextChange=this.handleTextChange.bind（this）；
this.handleSaveClick=this.handleSaveClick.bind（this）；
this.handleLogoutClick=this.handleLogoutClick.bind（this）；
}
// ...
render（）{
// ...
返回(
);
}
对于我来说，在这种情况下将storage.get和回调移动到componentDidMount（）是有意义的case@Jon现在想同样的事情，谢谢分享@感谢您的回复！在这种情况下，将storage.get和回调移到componentDidMount（）对我来说是有意义的case@Jon现在想同样的事情，谢谢分享@感谢您的回复！