Question

我在React Native中有一个组件，一旦知道它的大小，它就会更新它的状态。例如：

class MyComponent extends Component {
    ...

    render() {
        ...

        return (
            <View onLayout={this.onLayout.bind(this)}>
                <Image source={this.state.imageSource} />
            </View>
        );
    }

    onLayout(event) {
        ...

        this.setState({
            imageSource: newImageSource
        });
    }

    ...
}

这会出现以下错误：

警告：setState（...）：无法在现有状态转换期间更新（例如在render或其他组件的构造函数中）。渲染方法应该是道具和状态的纯函数;构造函数副作用是反模式，但可以移动到componentWillMount。

我想onLayout函数在渲染时被调用（这可能很好，更新越早越好）。解决这个问题的正确方法是什么？

提前致谢！

Answer 1

我们通过使用measure函数解决了这个问题，您必须等到场景完全完成才能进行测量以防止不正确的值（即在componentDidMount / componentDidUpdate中）。这是一个例子：

＆＃13;

  measureComponent = () => {
    if (this.refs.exampleRef) {
      this.refs.exampleRef.measure(this._logLargestSize);
    }
  }

  _logLargestSize = (ox, oy, width, height, px, py) => {
    if (height > this.state.measureState) {
      this.setState({measureState:height});
    }
  }

render() {
  return (
    <View ref = 'exampleRef' style = {{minHeight:  this.props.minFeedbackSize}}/>
  );
}

＆＃13;

Answer 2

Here是针对此类案例的文档解决方案

class MyComponent extends Component {
...

  render() {
    ...

    return (
        <View>
            <Image ref="image" source={this.state.imageSource} />
        </View>
    );
  }

  componentDidMount() {
    //Now you can get your component from this.refs.image
  }

  ...
}

但是我认为做这些事情会更好onload

React Native：在onLayout中更新状态给出＆＃34;警告：setState（...）：在现有状态转换期间无法更新＆＃34;

2 个答案: