я получил данные API и вставил и объект состояния, и хочу отсортировать этот извлеченный массив, и отобразить его - PullRequest
Новая
       5

я получил данные API и вставил и объект состояния, и хочу отсортировать этот извлеченный массив, и отобразить его

0 голосов
/ 11 февраля 2019

Я получил данные API JSON в URL, и поместил в массив состояния, и я хочу отсортировать этот массив по идентификатору и отобразить его и отобразить упорядоченный список в 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....

Ответы [ 2 ]

0 голосов
/ 11 февраля 2019

Вы не можете изменить то, что находится в вашем 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)
            })
        })
};

И затем просто удаляет sortCategoryfunction.

JSX в вашем render также имел неправильный синтаксис, вот правильный: 

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>
    )
}
0 голосов
/ 11 февраля 2019

Вы устанавливаете состояние неправильно.Попробуйте setState({cat: res}, some_callback_function)

...