Ajax Api позвонить в React Jsx

Question

Ajax Api позвонить в React Jsx

-1

Привет, ребята, я пытаюсь использовать ajax с JSX, можно использовать .append() в DOM?

Пример кода:

var React = require('react');    
var t = require('./../../../translations/translate');
var LocationComponent = React.createClass({

    componentDidMount: function () {
        $(document).ready(function() {
            $.ajax({
                type: 'GET',
                url: 'www.api.com',
                data: {},
                dataType: 'json',
                success: function (data) {
                    console.log(url);
                    $.each(data, function (index, element) {

                        // se serve il loop
                        var HTML = element.name;

                        $('#div').append(HTML);

                    });
                }
            });
        });

    },
    render: function(){

        return(

            <div id="div"></div>
        )
    }
});

module.exports = LocationComponent;

Lib3r74 26 июнь 2017, в 15:59

Источник

0

Не используйте jQuery только для его модуля AJAX. Загляните в специализированный HTTP-клиент, такой как axios
glhrmv 26 июнь 2017, в 13:27
0

Зачем вы это делаете в React? Просто обновите состояние и покажите его в методе рендеринга.
Boky 26 июнь 2017, в 13:33
0

Нет способа использовать Ajax?
Lib3r74 26 июнь 2017, в 13:44

Показать ещё 1 комментарий

Теги:

javascript

jquery

reactjs

ajax

jsx

1 ответ

Ещё вопросы

Не используйте jQuery только для его модуля AJAX. Загляните в специализированный HTTP-клиент, такой как axios
Зачем вы это делаете в React? Просто обновите состояние и покажите его в методе рендеринга.

Boky · Answer 1 · 2017-06-26T11-23-00.000Z

Зачем ты это делаешь в Реакт?

Разве это не чище?

class Test extends React.Component {
    constructor(props){
        super(props);

      this.state = {
        isLoading: true, 
        data: []
      }
    }

    componentDidMount(){
      fetch('https://facebook.github.io/react-native/movies.json')
        .then((response) => response.json())
        .then((responseJson) => {
            this.setState({data: responseJson.movies, isLoading: false});
        })
        .catch((error) => {
          console.error(error);
        });
    }

    render(){
        if(this.state.isLoading){
        return (<div>Loading...</div>)
      }
        return (
        <div>
            {this.state.data.map(item => <div>{item.title}</div>)}
        </div>
      )
    }
}

React.render(<Test />, document.getElementById('container'));

Вот скрипка.