Можно ли сделать массив состояний из этого объекта JSON? - PullRequest
Новая
       10

Можно ли сделать массив состояний из этого объекта JSON?

0 голосов
/ 23 декабря 2018

Новичок в Реакте здесь.Я использую axios для извлечения этого объекта, запрошенного в моей инфраструктуре отдыха сервера Django Api: 

{
    "count": 3,
    "next": null,
    "previous": null,
    "results": [
        {
            "id": 1,
            "url": "http://localhost:8000/blog/api/categories/1/",
            "title": "Django",
            "slug": "django"
        },
        {
            "id": 2,
            "url": "http://localhost:8000/blog/api/categories/2/",
            "title": "Git",
            "slug": "git"
        },
        {
            "id": 3,
            "url": "http://localhost:8000/blog/api/categories/3/",
            "title": "Introduction to docker",
            "slug": "introduction-to-docker"
        }
    ]
}

До сих пор я мог хранить эти переменные в отдельных массивах.Это реализация моего FetchDemo.js: 

import React, {Component} from 'react';
import axios from 'axios';

{/* https://daveceddia.com/ajax-requests-in-react/ */}

class FetchDemo extends Component {
state = {
    urls: []
}
state = {
    titles: []
}
state = {
    slugs: []
}

componentDidMount() {
        axios.get(`${this.props.url}${this.props.path}`).then(res => {
        const urls = res.data.results.map(num => num.url);
        const titles = res.data.results.map(num => num.title);
        const slugs = res.data.results.map(num => num.slug);
        this.setState( {urls} );
        this.setState( {titles} );
        this.setState( {slugs} );
    });
}

render() {
    return (
    <div>
        <h1>{`${this.props.url}${this.props.path}`}</h1>        
        <ul>
            /// How to generate the JSX objects? ///
        </ul>
    </div>
    );
}
}

export default FetchDemo;

Можно ли вместо этого встроить в запрос axios массив состояний из этого объекта JSON, как следующий?Как мне сгенерировать JSX с этими новыми категориями состояний? 

this.setState({
        categories: [
        {url: "http://localhost:8000/blog/api/categories/1/", title: "Django", slug: "django"},
        {url: "http://localhost:8000/blog/api/categories/2/", title: "Git", slug: "git"},
        {url: "http://localhost:8000/blog/api/categories/3/", title: "Introduction to Docker", slug: "introduction-to-docker"},
        ]
    }
    )

Хотелось бы знать больше React и JavaScript.Любая помощь приветствуется, спасибо заранее.

1 Ответ

0 голосов
/ 23 декабря 2018

Здесь следует отметить несколько вещей.

  1. state - это один объект с несколькими ключами.
  2. setState() - это одна асинхронная транзакция.Когда вы обновляете свое состояние, вы должны обновить его за один раз.

Вы можете сделать вещи проще, если я правильно понимаю ваш вопрос.Вам не нужно хранить значения в нескольких ключах.Может храниться в одной клавише categories. 

import React, { Component } from 'react';
import axios from 'axios';

class FetchDemo extends Component {

  constructor(props) {
    super(props);

    this.state = {
      categories = []
    }
  }

  componentDidMount() {
    axios.get(`${this.props.url}${this.props.path}`).then((res) => {
      const urls = res.data.results.map((num) => num.url);
      const titles = res.data.results.map((num) => num.title);
      const slugs = res.data.results.map((num) => num.slug);
      this.setState({
        categories: res.data.results
      });
    });
  }

  render() {
    const { categories } = this.state;
    return (
      <div>
        <h1>{`${this.props.url}${this.props.path}`}</h1>
        <ul>
          {categories.length ? 
            categories.map(cat => (
              <li key={cat.id}>
                <div>{cat.title}</div>
              </li>
            ))
            : 
            (<li>categories not loaded yet</li>)}
        </ul>
      </div>
    );
  }
}

export default FetchDemo;
...