当一个变量在 reactjs 中更新时，以及如何强制更新

Question

我正在努力理解，我知道当我 console.log(图片) 我得到最终结果

当我 "console.log(JSON.stringify(pictures))" 时，我得到了当前的那一刻。

为什么在记录第二个选项的那一刻，数组是空的最后它得到了一个值，

如何强制值与 this.state

同步

问题是当我最后发送时：

ImageList pics={this.state.picturesArr} />

正在发送空

let pictures = [];
let urls =[];
let titles=[];
let nextpage ='';
let pageback='';

class App extends Component {

    constructor(props) {
        super(props);

        this.state = {
            picturesArr: [],
            urlArr: [],
            titleArr:[],
            nextPage:'',
            prevuisPage:''
        };

        this.loadSubreddit = this.loadSubreddit.bind(this);
    }

    loadSubreddit(subre) {

        reddit.hot(subre).limit(5).fetch(function(res) {
            console.log(res);
            nextpage = res.data.after.toString();
            // pageback = res.data.before.valueOf();

            for (let i = 0; i < res.data.children.length; i++){
                pictures.push(res.data.children[i].data.url);
                urls.push(res.data.children[i].data.permalink);
                titles.push(res.data.children[i].data.title);
            }
        });

        this.setState({
            picturesArr: pictures,
            urlArr: urls,
            titleArr: titles,
            nextPage: nextpage,
            prevuisPage: pageback
        }, () => {
            console.log(this.state)
        });

        console.log(pictures);
        console.log(JSON.stringify(pictures));
    }


    componentWillMount() {
        console.log('comp is mounting');
        this.loadSubreddit('cats');
    }

    render() {
        return (
            <div className="App">
            <div className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <h2>Welcome to React</h2>
            </div>
                <Col sm={8} md={10} smOffset={2} mdOffset={1} >
                    <ImageList pics={this.state.picturesArr} />
                </Col>
            </div>
        );
    }
}

export default App;

Answer 1

在您提供的代码中，您在 api 调用回调之外调用了 this.setState。

您需要 (1) 将设置状态的代码移到回调中，以及 (2) 将回调函数绑定到组件实例以访问其 this.setState.

固定的loadSubbreddit函数如下所示。

loadSubreddit(subre) {

    reddit.hot(subre).limit(5).fetch(function(res) {
        console.log(res);
        nextpage = res.data.after.toString();
        // pageback = res.data.before.valueOf();

        for (let i = 0; i < res.data.children.length; i++){
            pictures.push(res.data.children[i].data.url);
            urls.push(res.data.children[i].data.permalink);
            titles.push(res.data.children[i].data.title);
        }

        this.setState({
            picturesArr: pictures,
            urlArr: urls,
            titleArr: titles,
            nextPage: nextpage,
            prevuisPage: pageback
        }, () => {
            console.log(this.state)
        });

        console.log(pictures);
        console.log(JSON.stringify(pictures));
    }.bind(this));
}

当一个变量在 reactjs 中更新时，以及如何强制更新

When a variable is updating in reactjs, And how to force the update

javascript

reactjs

create-react-app