请教setState无效的问题



  • 新手引导中的AwesomeProject(http://reactnative.cn/docs/tutorial.html#content)代码中

    constructor(props) {
        super(props);
        this.state = {
            loaded: false,
        };
    }
    
    componentDidMount() {
        this.fetchData();
    }
    
    fetchData() {
        fetch(REQUEST_URL)
            .then((response) => response.json())
            .then((responseData) => {
                this.setState({
                    loaded: true,
                });
            })
            .done();
    }
    

    这样写的代码在fetchData函数中setState后this.state.loaded的值被正确修改了,然而把fetchData函数改成以下代码却不能设置this.state.loaded的值了,请问下是什么原因?

    fetchData() {
        this.setState({
            loaded: true,
        });
    }


  • 似乎是因为componentDidMount的时候组件的state还没初始化好?
    请问state是在什么时候开始可以使用?
    看着教程学很多基础的东西还没接触到,请见谅。


  • administrators

    这样当然是可以设置的,而且state当然是在第一时间初始化好的,我不知道你如何判断“不能设置”的



  • fetchData() {
        console.log('before setstate');
        console.log(this.state.loaded);
        this.setState({
            loaded: true,
        });
        console.log('after setstate');
        console.log(this.state.loaded);
    }
    

    我是用这样打印出日志来查看this.state.loaded值的,结果就是第二种代码下值没改变。
    我如果加个按钮,在按钮点击事件中调用fetchData函数也是可以正确设置this.state.loaded的值,因此我才有上面的猜测。


  • administrators

    setState是异步的,也就是不会在当前context生效,你只能在render方法中获知state的改变



  • @cgafeng
    fetchData() {
    this.setState({
    loaded: true,
    });
    }

    需要在 constructor 里面 绑定
    this.fetchData = this.fetchData.bind(this);



  • 你好,我也碰到了类似的问题,请问最后是什么原因?


登录后回复