时间戳

首页 > 解决方案 > 为什么内容按错误的选项排序？

javascript - 为什么内容按错误的选项排序？

问题描述

所以我从 API 中获取电影信息。在我的页面中，我在下拉列表中有三个选项，用于按字母、用户分数和受欢迎程度进行排序。

问题是当我选择一个选项时，它会按它之前的选项排序。例如，当我选择按用户分数排序时，它会按字母顺序排序，这是下拉列表中的选项。然后，如果我继续选择选项，它最终会变得随机并与其中任何一个进行排序。

不知道为什么会这样。我猜这与我设置状态的方式有关。

这是我的代码：

import React, {Component} from "react";
import {connect} from "react-redux";
import {crimeGenre} from "./redux";

class CrimeGenre extends Component {
    constructor(){
        super();

        this.state = {
            value: "alphabetically"
        }
    }

    componentDidMount(){
        this.props.crimeGenre();
    }

    sortFilms = (event) => {
        this.setState({
            value: event.target.value
        })
        if(this.state.value === "alphabetically"){
            return this.props.select && this.props.select.sort((a, b) => {
                return a.title < b.title ? -1 : 1;
            });
        }else if(this.state.value === "score"){
            return this.props.select && this.props.select.sort((a, b) => {
                return a.vote_average > b.vote_average ? -1 : 1;
            });
        }else if(this.state.value === "popularity"){
            return this.props.select && this.props.select.sort((a, b) => {
                return a.popularity > b.popularity? -1 : 1;
            });
        }
    }

    render(){
        const mappedSelected = this.props.select && this.props.select.map((film, i) => { 
            return (
                <div key={i}>
                    <h1>{film.title}</h1>
                    <img src={`http://image.tmdb.org/t/p/w185${film.poster_path}`}/>
                    <p>Avg. User Score: {film.vote_average}</p>
                    <p>Popularity Index: {film.popularity.toFixed(0)}</p>
                </div>
            )
        })

            return(
                <div>
                <form>
                    <label>
                        Sort By:
                        <select value={this.state.value} onChange={this.sortFilms}>
                            <option id="alphabetically" value="alphabetically">Alphabetically</option>
                            <option id="score" value="score">User Score</option>
                            <option id="popularity" value="popularity">Popularity</option>
                        </select>
                    </label>
                </form>
                    {mappedSelected}
                </div>
            )
        }
    }

export default connect(state=> state, {crimeGenre})(CrimeGenre);

标签： javascriptreactjssortingredux

解决方案

ReactsetState()不会立即反映状态值的更新，而是会创建一个挂起的状态转换。调用后访问状态setState()可能会返回现有值。

无法保证调用的同步操作，setState并且调用可能会被批处理以提高性能。

查看官方的ReactJS 文档，它更好地解释了这一点。

为确保您的sortFilms函数使用新状态，请将其作为回调传递，setState()如下所示：

sortFilms = (event) => {
    this.setState({value: event.target.value}, function () {
        if(this.state.value === "alphabetically"){
            return this.props.select && this.props.select.sort((a, b) => {
                return a.title < b.title ? -1 : 1;
            });
        }else if(this.state.value === "score"){
            return this.props.select && this.props.select.sort((a, b) => {
                return a.vote_average > b.vote_average ? -1 : 1;
            });
        }else if(this.state.value === "popularity"){
            return this.props.select && this.props.select.sort((a, b) => {
                return a.popularity > b.popularity? -1 : 1;
            });
        }
    });
}

推荐阅读