选择在初始更改时返回错误值

Question

我正在使用 React、jQuery 和 NewsAPI。当用户更新选择的选项时，请求和状态应该改变。但是，当 Onchange 函数执行时，它会返回错误的值。函数再次执行后，该值由一个索引关闭。有人可以在不粗鲁的情况下指出我正确的方向吗:)。

import React, { Component } from 'react';
import $ from 'jquery';
import Posts from './Components/Posts';
import './style/Content.scss';


class Content extends Component {

    constructor(props){
        super(props);
        this.state = {
            posts: [],
            value: 'the-verge'
        }

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

    //Ajax Request
    getNews() {
        $.ajax({
            url: 'https://newsapi.org/v1/articles?source='+ this.state.value + '&sortBy=latest&apiKey=' + api,
            dataType: 'json',
            cache: true,
            success: function(data) {
                this.setState({ posts: [data] }, function() {
                    console.log(data);
                })
            }.bind(this),
            error: function(xhr, status, err) {
                console.log(err);
            }
        })
    }

    // Change the request depending on selected option
    change(event){
        event.preventDefault();
        this.setState({value: event.target.value});
        this.getNews();
    }

    componentWillMount(){
        this.getNews();
    }

    componentDidMount() {
        this.getNews();
    }

    componentWillReceiveProps(){
        this.change();
    }

    render() {
        return (
            <div className="Content">
                <div className="Search">
                    <h2>It's all in one place</h2>
                    <div className="Search__wrap">
                        <select value={this.state.value} onChange={this.change}>
                            <option defaultValue value="the-verge">Tech Verge</option>
                            <option value="techcrunch">Tech Crunch</option>
                            <option value="time">Time</option>
                            <option value="bbc-sport">BBC Sport</option>
                        </select>
                    </div>
                </div>
                <Posts posts={this.state.posts} />
            </div>
        );
    }
}

export default Content;

Answer 1

我不确定这是否正确，但这是我浏览代码时最明显的。

setState 的一个重要之处在于它本质上不是同步的。由于一个函数中可能有多个setState 调用，因此它们被批处理并异步执行。所以有可能是调用getNews时状态没有更新。

解决方案？将值显式传递给getNews 函数。

change(event){
    event.preventDefault(event.target.value);
    this.setState({value: event.target.value});
    this.getNews();
}

然后：

getNews(value) {
    $.ajax({
        url: 'https://newsapi.org/v1/articles?source='+ value + '&sortBy=latest&apiKey=' + api,
        dataType: 'json',
...

这样您就不必担心setState 的竞态条件在您可以使用该函数之前完成。

您必须在componentDidMount 或componentWillMount 中使用this.state.value。小提示：您只需要在其中一个上获取 API，选择您要使用的一个并删除另一个，这是多余的 :)

另外，在componentWillReceiveProps 中调用this.change 会触发错误，因为您没有传入事件。