使用未声明的 API 调用初始化容器.js(React Context API)

Question

我想简单地使用unstatement.js(React Context包装器(的api调用数据初始化容器状态。

我看到一个用几个变量实例化容器的例子：

import { Container} from 'unstated';
class WordlistContainer extends Container {
constructor(...words) {
super();
this.state = {
words: words
};
}
}

let wordList = new WordlistContainer('word1', 'word2');
export default wordList;

如果我想获取一些 api 数据以传递到此容器的状态 - 这是正确的方法吗？还是应该从父组件传递道具？这用于在首次加载时将数据加载到 SPA 中。

Answer 1

这最终起作用了：

​​import React, { Component } from 'react';
​​import RDOM from 'react-dom';
​​import { Container, Provider, Subscribe } from 'unstated';
​​
​​class ApiContainer extends Container {
​​  state = {
​​    loading: true,
​​    data: null
​​  }
​​  
​​  setApiResponseAsState = async () => {
​​    fetch.('someapi').then(res => res.jsoj()).then( data => this.setState({ data, loading: false });
​​  }
​​}
​​
​​class ApiConsumer extends Component {
​​  async componentDidMount() {
​​    this.props.setApiResponseAsState();
​​  }
​​  
​​  render() {
​​    return <div>{this.props.state}</div>
​​  }
​​}
​​
​​RDOM.render(
​​  <Provider>
​​    <Subscribe to={[ApiContainer]}>
​​      { props => <ApiConsumer {…props} />
​​      }
​​    </Subscribe>
​​  </Provider>
​​  , document.querySelector("#root");
​​)

Answer 2

一种直接的方法是使用容器的实例。 一个示例实现，用于WordlistContainer：

export default class WordlistContainer extends Container {
fetchWords = async () => {
const result = await fetch('https://example.com')
const words = await result.json()
this.setState({ words })
}
// etc... the rest of the container's code
}
// in this and most cases we want a singleton (but other instances can be created)
const wordlistContainer = new WordlistContainer()
export const getWordlistContainerInstance = () => wordlistContainer

然后，在提供程序中注入此实例，如下所示：

<Provider inject={[getWordlistContainerInstance()]}>

可以通过调用getWordlistContainerInstance().fetchWords()