如何在反应JS或React-Redux JS

Question

我对网络开发很陌生。 我已经下载了CloudKit JS＆amp;在script标签中添加index.html。我确保它在我的react-redux包JS之前加载。

  <script src="/cloudkit.js"></script>
  <script src="/bundle.js"></script>

我制作了单班组件＆amp;我在组件上运行身份验证，如下所示。

componentWillMount() {
CloudKit.configure({
  containers: [{
    containerIdentifier: '<container ID>',
    apiToken: '<secret api token>',
    environment: 'development'
  }]
});
var container = CloudKit.getDefaultContainer();
container.setUpAuth().then(function(userInfo) {
  if(userInfo) {
            console.log(userInfo);
        } else {
            console.log('need to login');
        }
    });
}

然后我收到以下错误 如何使用CloudKit JS在React中进行身份验证？

Answer 1

预计421：如果用户已登录，基本上这是CloudKit JS与服务器核对。您仍然应该看到您的日志声明需要登录＆＃39;。

您还应该：

• 提供应在其中呈现signIn / signOut按钮的dom元素。
• 在container.setUpAuth中拨打componentDidMount而不是componentWillMount（当您调用此方法时，必须存在登录按钮的dom元素。）

示例代码（https://jsfiddle.net/byb7ha0o/4/）：

CloudKit.configure({
  containers: [{
    containerIdentifier: '<container>',
    apiToken: '<token>',
    environment: 'development'
  }]
});
const container = CloudKit.getDefaultContainer();

class HelloCloudKitJS extends React.Component {

  constructor() {
    super();
    this.state = {
        userInfo: null
    }
  }

  componentDidMount() {
    container
      .setUpAuth()
        .then(userInfo => {
        if(userInfo) {
            this.setState({userInfo: userInfo});
          return;
        }
        container
          .whenUserSignsIn()
            .then(userInfo => {
                this.setState({userInfo: userInfo})
          })  
      })
  }

  render() {
    return <div>
      <div>
        <div id="apple-sign-in-button"></div>
        <div id="apple-sign-out-button"></div>
      </div>
    </div>;
  }
}

ReactDOM.render(
  <HelloCloudKitJS />,
  document.getElementById('container')
);