Question

我已经在url中获取了一个json api数据，并放入了一个状态数组，我想按ID对数组进行排序并显示它，并在console.log中显示有序列表，但它不会显示和排序。

这是我的代码：

//the class with state 
class ProductsideBar extends Component {

constructor(props){
    super(props) 
     this.state= {
        cat:[],
    }
}

//我有两个用于提取和排序的功能

      //fetchCategory function--------------------- 
      fetchCategory = () => {
        fetch('http://localhost/wpsedighgroup/wp-json/wp/v2/mahsoolat-sanati)
       .then(res => res.json())
       .then((res) => {
           this.setState = {
            cat:res  
      })
};

//sort function--------------------- 
       sortCategory = () => {
        console.log('state cat is  : ' , this.state.cat)
        const catSOrted = this.state.cat.sort((a, b) => b.id - a.id);
        console.log('Ordered is  : ' , catSOrted )
     } 




//lifeCycle function--------------------- 
   componentDidMount() {
    this.fetchCategory();
    this.sortCategory ();
    // this.fetchSubcategory();

} 



//render----
  render () {
      return(
         <Grid  fluid >
          <Col className='side_bar'>
            <div>     
              {this.state.cat.map(  cat  => {
               return (
                <ul>
                 <Link to={`/Categories/${cat.name}`}><h1>{cat.id}</h1></Link> 
                     </li>  
                </ul>
                            )
                          })}
                 </div>           
    export default Prodcuts....

Answer 1

您将状态设置为错误的方式。尝试setState({cat: res}, some_callback_function)

Answer 2

没有state，就无法更改setState中的内容，即使仅对其进行排序也是如此。我建议在获取数组后立即对其进行排序。

您的setState语法也不正确，此函数需要一个JSON对象：

fetchCategory = () => {
    fetch('http://localhost/wpsedighgroup/wp-json/wp/v2/mahsoolat-sanati')
        .then(res => res.json())
        .then(res => {
            this.setState({
                cat: res.sort((a, b) => b.id - a.id)
            })
        })
};

然后删除您的sortCategory函数。

您的render中的JSX语法也不正确，这是一种正确的语法：

render() {
    return (
        <Grid fluid >
            <Col className='side_bar'>
                <div>
                    <ul>
                    {this.state.cat.map(cat => 
                        <li>
                            <Link to={`/Categories/${cat.name}`}><h1>{cat.id}</h1></Link> 
                        </li> 
                    )} 
                    </ul>
                </div> 
            </Col>
        </Grid>
    )
}

我获取了一个api数据，并放入了一个状态的对象，并且想要对获取的数组进行排序，并显示它

2 个答案: