在渲染后使用getOffsetHeight和异步数据

Question

下面的代码很简单，但是我认为这是不适当的。 基本上，我尝试计算列表的高度。 但是，比进行setTimeout hack更好的解决方案是什么？ 我尝试了componentDidMount，但这不能保证数据已加载。

class App extends Component {
  constructor() {
    super();

    this.state = {
      users: null
    };
  }

  componentWillMount() {
    axios.get("https://randomapi.com/api/6de6abfedb24f889e0b5f675edc50deb?fmt=raw&sole")
      .then(response => this.setState({ users: response.data }));
  }

  componentDidMount() {
    setTimeout(() => {
      console.log(this.userElem.offsetHeight);
    }, 1000);
  }

  render() {
    return (
      <div style={styles}>
        <div ref={elem => (this.userElem = elem)}>
          {this.state.users &&
            this.state.users.map(o =>
              <p>
                {o.first}
              </p>
            )}
        </div>
      </div>
    );
  }
}

演示https://codesandbox.io/s/j46o2656vy

Answer 1

而不是在componentWillMount内部进行api调用，而是在componentDidMount方法内部进行，而是使用setState回调方法检查元素的高度。

像这样：

componentDidMount() {
    axios.get("https://randomapi.com/api/6de6abfedb24f889e0b5f675edc50deb?fmt=raw&sole")
    .then(response => {
        this.setState({ users: response.data }, () => {
            console.log(this.userElem.offsetHeight);
        }) 
    });
}

或者，您也可以使用componentDidUpdate方法，该方法在更新发生后立即被调用。 初始渲染不调用此方法。

Answer 2

你可以使用componentDidUpdate并检查您的this.userElem.offsetHeight变量there.Also，我会改变componentWillMount与componentDidMount。 您可以在这里阅读更多内容。