Question

下面的代码很简单，但在我看来这是不合适的。基本上我试着计算一个列表的高度。但是什么是比做setTimeout黑客更好的解决方案？我尝试了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>
    );
  }
}

demo 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 变量。此外，我还要更改 componentWillMount with componentDidMount 。您可以阅读更多here。

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

2 个答案: