ReactJS) как получить данные с помощью XMLHttpRequest из PHP и визуализировать эти данные внутри одноуровневого компонента

Question

Я сейчас занимаюсь разработкой веб-приложения ReactJS.

JQuery не используется.

Когда ReactJS запускает событие onTouchEnd, ReactJS отправляет XMLHttpRequest на мой php-сервер. PHP будет проходить через базу данных MYSQL. После этого, если цикл по базе данных прошел успешно, PHP отправит данные HTML в javascript AND! Я предоставлю эти HTML-данные внутри дочернего компонента.

export default class ItemList extends React.Component{
state={
    isScrolled:''
}
handleClick = (e)=>{
    e.stopPropagation();
    console.log(e.currentTarget.id);
    console.log('click '+e.target.id);
}
handleTouchStart = (e)=>{
    console.log('touch start '+e.currentTarget.id);
}
handleTouchMove = (e)=>{
    console.log('touch move'+e.target.id);
    this.setState({
        isScrolled:'scrolled'
    })
}
handleTouchEnd = (e)=>{
    const continent = e.currentTarget.getAttribute('data-continent');
    if(this.state.isScrolled=='scrolled'){
        console.log('nothing happens');
    }else{
        console.log('event worked');
        ajaxRequest(e.currentTarget.className,continent);
    }
    this.setState({
        isScrolled:''
    })
}
render(){
    return(
        <section id="Main">
            <Continents 
                onClick={this.handleClick} 
                onTouchStart={this.handleTouchStart}
                onTouchMove={this.handleTouchMove}
                onTouchEnd={this.handleTouchEnd}
            />
            <Countries/>
        </section>
    )
 }
}

class Continents extends React.Component{
render(){
    return(
        <div className="items">
            <div id="Continent1" {...this.props} data-continent="Europe" className="continents">
                <figure>    
                    <img src="img/london.jpg"/>
                    <figcaption>EUROPE</figcaption>
                </figure>
            </div>
            <div id="Continent2" {...this.props} data-continent="Asia" className="continents" >
                <figure>
                    <img src="img/korea.jpg"/>
                    <figcaption>ASIA</figcaption>
                </figure>
            </div>
            <div id="Continent3" {...this.props} data-continent="North America" className="continents">
                <figure>
                    <img src="img/grandcanyon.jpg"/>
                    <figcaption>NORTH AMERICA</figcaption>
                </figure>
            </div>
            <div id="Continent4" {...this.props} data-continent="South America" className="continents">
                <figure>
                    <img src="img/brazilRio.jpg"/>
                    <figcaption>SOUTH AMERICA</figcaption>
                </figure>
            </div>
            <div id="Continent5" {...this.props} data-continent="Africa" className="continents">
                <figure>
                    <img src="img/africaWild.jpg"/>
                    <figcaption>AFRICA</figcaption>
                </figure>
            </div>
            <div id="Continent6" {...this.props} data-continent="Oceania" className="continents">
                <figure>
                    <img src="img/aukland.jpg"/>
                    <figcaption>OCEANIA</figcaption>
                </figure>
            </div>
        </div>
    )
  }
}

class Countries extends React.Component{
render(){
    return('')
}
}

это функция ajaxRequest

export default function ajaxRequest(e,value){
let xhr;
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
if(typeof(e.target)!='undefined'){
    switch(e.target.className){
        case 'search':
        xhr.open('get','//localhost:80/ReactStudy/travelReduxApp/public/server/search.php?search=' + value,true);
    }
}else{
    switch(e){
        case 'continents':
            xhr.open('get','//localhost:80/ReactStudy/travelReduxApp/public/server/itemList.php?continent='+value ,true);
    }
}
xhr.onreadystatechange = function(data){
    switch(xhr.status){
        case 200:
            const text = xhr.responseText;
            console.log(text);
    }
}
if(xhr.readyState===XMLHttpRequest.DONE){
    xhr.abort();
}
xhr.send();
}

Что я получаю в console.log в xhr.onreadystatechange

<div>England</div><div>Italy</div><div>Germany</div><div>Sweden</div><div>Russia</div><div>Czech Republic</div><div>Poland</div><div>Greece</div><div>Netherlands</div><div>Spain</div><div>Portugal</div><div>France</div>

что мне делать, если я хочу сделать все эти div в компоненте Страны? Должен ли я использовать избыточность в моем случае? Какой самый лучший способ?

Извините за мой плохой английский. Не носитель английского языка.

Answer 1

Что вы можете сделать, это обработать ajax-запрос в асинхронном методе и дождаться результата. Тогда он будет у вас локально, чтобы вы могли отображать или передавать его в любое удобное для вас место ... что-то вроде этого:

state = {countries:''}
getRequestData = async () => {
  let result = await ajaxRequest(e.currentTarget.className,continent);
  this.setState({countries:result})
}

handleTouchEnd = (e)=>{
    const continent = e.currentTarget.getAttribute('data-continent');
    if(this.state.isScrolled=='scrolled'){
        console.log('nothing happens');
    }else{
        console.log('event worked');
        getRequestData()
    }
    this.setState({
        isScrolled:''
    })
}

Answer 2

Забудьте о:

• xhr, используйте fetch или axios (несколько строк кода вместо этого беспорядка);
• возврат html из php , возврат массива json;

После извлечения сохраните результат json в состояние (используя setState) и перейдите к <Countries/>

<Countries list={this.state.countries} />

и внутри <Countries/> рендер использовать карту

render() {
  return (
    <div>
      {this.props.list.map( (country,idx) => (
         <div key={idx}>{country}</div>
      ) )}
    </div>
  )
}

Вы можете отобразить его как div, li, button, назначить обработчики событий, sort, filter ... все, что вам нужно, без повторного вызова php.

Это простой поток (выборка json, setState, render), и есть множество руководств по этому поводу, обычно рендеринг данных в одном и том же компоненте, передача загруженных данных дочерним элементам работает почти так же (см. Выше) .

Answer 3

Лучше всего, если бэкэнд даст вам данные, а не разметку.

Однако вы все равно можете добавить это через свойство реагирования, которое называется dangerouslySetInnerHTML. Имейте в виду, что это связано с некоторыми проблемами безопасности из XSS .

PD: Если вы только учитесь реагировать, НЕ ИСПОЛЬЗУЙТЕ REDUX. Это ошеломит вас и, как правило, его можно избежать (особенно для небольших приложений).