Question

我正在尝试使用set和更新属性，但是，它似乎没有重新渲染。

在下面的代码中，您将看到onStart和onComplete使用setState来更新样式属性。

属性会更新，但是dom中的样式不会改变，尽管我的渲染功能似乎是以正确的方式设置的吗？

export default class FirstScene extends React.Component {
    constructor() {
        super();
        let self=this;
        this.state = { 
            style:{display:'hidden'}
        };
        this.mainTimeline= new TimelineMax({repeat:0,paused:true,
            onStart:function(){
                self.setState({style:{display:'block'}})
            }.bind(self),
            onComplete:function(){
                self.setState({style:{display:'hidden'}})
                console.log(this.state);
            }.bind(self)
        });
    }

    render() {
        return (
            <div style={this.state.style} >test hey</div>
        )
    }

};

Answer 1

通常，在componentDidMount()方法中更好地处理这样的初始化，因此在修改状态之前保证组件存在。

＆＃13;

export default class FirstScene extends React.Component {

  state = {
    style: {
      display: 'hidden'
    },
    mainTimeline: null
  }

  componentDidMount() {
    const mainTimeline = new TimelineMax({
      repeat: 0,
      paused: true,
      onStart: () => {
        this.setState({
          style: {
            display: 'block'
          }
        })
      }.bind(self),
      onComplete: () => {
        this.setState({
          style: {
            display: 'hidden'
          }
        })
        console.log(this.state);
      }
    });

    this.setState({
      mainTimeline
    });
  }

  render() {
    return <div style={this.state.style}>test hey</div>;
  }

};

＆＃13;

另外，请注意，在onStart和onComplete回调中使用es6箭头功能，您可以避免绑定和捕获对this的引用。

Answer 2

构造函数应仅用于初始化状态。你不应该在构造函数中调用this.setState，你应该尝试将TimelineMax移动到componentDidMount。此外，因为this.setState是异步调用它多次不会工作，例如

class Counter extends React.Component{
        constructor(props){
            super(props)
            //initial state set up
            this.state = {value:0}
        }
        componentDidMount(){
            //updating state, OUTPUT will be 1
            this.setState({value:this.state.value+1})
            this.setState({value:this.state.value+1})
            this.setState({value:this.state.value+1})
            this.setState({value:this.state.value+1})
        }
        render(){
            return <div>Message:{this.state.value}</div>
        }
    }

我相信这就是你的模块无法运作的原因。因此，您应该使用在状态更新后触发的this.SetState的回调或使用componentDidUpdate docs ref

Answer 3

尝试在TimelineMax生命周期方法中创建componentDidMount。可能是在安装组件之前执行了回调。

为什么React setState没有触发重新渲染？

3 个答案: