Question

我希望状态依赖于服务器数据。我想过使用componentWillMount：

componentWillMount() {
    this.setState( async ({getPublicTodosLength}, props) => {
      const result =  await this.getPublicTodosLengthForPagination();
      console.log("result = ", result) // returns the length but not assigned on this.state.getPublicTodosLength
      return { getPublicTodosLength: result+getPublicTodosLength }
    });
  }

  getPublicTodosLengthForPagination = async () => { // get publicTodos length since we cannot get it declared on createPaginationContainer
        const getPublicTodosLengthQueryText = `
          query TodoListHomeQuery {# filename+Query
            viewer {
              publicTodos {
                edges {
                  node {
                    id
                  }
                }
              }
            }
          }`
    const getPublicTodosLengthQuery = { text: getPublicTodosLengthQueryText }
    const  result = await this.props.relay.environment._network.fetch(getPublicTodosLengthQuery, {})
    return await result.data.viewer.publicTodos.edges.length; 
  }

有值，但是我的getPublicTodosLength状态没有赋值？我想我不必在这里绑定，因为结果返回我想在getPublicTodosLength状态分配的数据

Answer 1

可能你可以使用：

代码段：

(async ({getPublicTodosLength}, props) => {
      const result =  await this.getPublicTodosLengthForPagination();
      console.log("result = ", result);
      return { getPublicTodosLength: result + getPublicTodosLength }
})).then((v)=> this.setState(v));

如果有效，请告诉我。

Answer 2

为什么不做这样的事呢？

...
async componentWillMount() {
  const getPublicTodosLength = this.state.getPublicTodosLength;
  const result = await this.getPublicTodosLengthForPagination();
  this.setState({
    getPublicTodosLength: result+getPublicTodosLength,
  });
}
...

它更简单，更容易阅读。我认为原始代码的问题是在setState（）中使用异步函数。在转换后的代码中，创建了另一个包装函数，然后它可能会松散上下文。

Answer 3

如果您希望州依赖于服务器数据，则应使用B。

  在安装发生之前立即调用
componentWillMount（）。它在 render（）之前调用，因此在此方法中同步设置状态不会触发重新渲染。避免在此方法中引入任何副作用或订阅。   这是服务器渲染上唯一的生命周期钩子。通常，我们建议使用构造函数（）。
     装载组件后立即调用
componentDidMount（）。需要DOM节点的初始化应该放在这里。 如果您需要从远程端点加载数据，这是实例化网络请求的好地方。在此方法中设置状态将触发重新渲染。

From React Doc

Answer 4

我决定让componentWillMount异步并且效果很好。

这是代码：

componentWillMount = async () => {
    let result =  await this.getPublicTodosLengthForPagination();
    this.setState((prevState, props) => {
      return { 
        getPublicTodosLength: result 
      }
    });
  }

this.setState不能在componentWillMount（）上工作？

4 个答案: