Каков правильный способ делать request из-за GET REST API?

var data = function (){
    fetch('http://localhost:3000/api/demos')  
  .then(function(response) {
    return response.json()
  })
}

class Content extends React.Component {

    constructor(props) {
        super(props);

        this.state = data;
    }

    render() {
        let demosView = [];

        this.state.demos.forEach(function(demo){
            demosView.push(
                <div className="col-lg-3 col-md-4 col-sm-6 col-xs-12">
    <div className="hovereffect">
        <img className="img-responsive" src={imgdir + demo.img} alt={demo.name} />
            <div className="overlay">
                <h2>{demo.name}</h2>
                <p> 
                    <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec blandit nibh. Suspendisse potenti. Nulla vitae eleifend leo, sed gravida nulla.</b>
                </p> 
                <p> 
                    <a href="#">VIEW DEMO</a>
                </p> 
            </div>
    </div>
</div>
            )
        });

        return (
            <div>
                <ul>
                    {demosView}
                </ul>
            </div>
        );
    }
}

export default Content;

Каков правильный способ делать этот request из-за GET в мой REST API?

1
задан 11.01.2017, 20:25
0 ответов

Состояние компонента React - объект javascript и этот хранит информацию mutable компонента, с mutable он относится к информации, которая изменится в компоненте.

Это объект javascript

{
  nombre: 'Juan',
  apellido: 'Perez'
  direccion: {
    callePrimaria: 'Avenida siempre viva 123',
    calleSecundaria: 'La que cruza'
  }
}

Ты можешь видеть структуру структурой Основной тип-> Стоимость или { ключ: 'стоимость' }, поскольку стоимость у тебя могут быть числа, десятичные, другие объекты или даже функции, но строго говоря о компоненте React ты должен ограничиваться тем, чтобы иметь числа, цепи, booleanos, десятичные и объекты как стоимость и избеги использовать функции как в твоем примере, где ты инициализируешь состояние распределяя функцию прямо.

this.state = data;

В твоем коде изменчивая дата - функция не объект следовательно ты не должен распределять это state, state - представление состояния компонента следовательно ты не должен распределять функцию, так как, сделав это, ты хранил бы поведение вместо состояния.

То, что ты должен делать, состоит в том, чтобы смотреть в твой компонент React как визуальное представление определенного состояния твоего приложения. В твоем случае состояние - информация о списке 'demos'. следовательно это - этот список, полученный от запроса ajax тот, который должен быть распределенным state компонента, не функции, которая реализует вызов ajax в себе.

Тогда из-за default список demos должен быть пустым. и ты можешь использовать метод componentDidMount компонента React как пункта отправления, чтобы реализовывать просьбу Аякс в сервер прося список demos, когда тогда своры охотничьих собак получают список demos состояние компонента обновляя список, что renderiza компонент.

class Content extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            demos: []
        };
    }

    componentDidMount() {
        let self = this;

        fetch('http://localhost:3000/api/demos')
            .then(function(response) {
                return response.json();
            }).then(function(demos) {
                self.setState({demos: demos})
            });
    }

    render() {
        let demosView = [];

        this.state.demos.forEach(function(demo){
            demosView.push(
                <div className="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                    <div className="hovereffect">
                        <img className="img-responsive" src={imgdir + demo.img} alt={demo.name} />
                        <div className="overlay">
                            <h2>{demo.name}</h2>
                            <p>
                                <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec blandit nibh. Suspendisse potenti. Nulla vitae eleifend leo, sed gravida nulla.</b>
                            </p>
                            <p>
                                <a href="#">VIEW DEMO</a>
                            </p>
                        </div>
                    </div>
                </div>
            )
        });

        return (
            <div>
                <ul>
                    {demosView}
                </ul>
            </div>
        );
    }
}

export default Content;

Всегда ты должен использовать метод setState компонента React для mutar (изменять) Ваше состояние, таким образом React знает, что он должен изменять признак state, и также ты вынуждаешь, которому метод render работал, что обновляет вид и может отображать изменения в DOM.

1
ответ дан 03.12.2019, 17:45