Блог

Главная - Вопросы по программированию - Как правильно переписать ajax-функции в эквиваленты Reactjs

Как правильно переписать ajax-функции в эквиваленты Reactjs

#ajax #reactjs

#ajax #reactjs

Вопрос:

С помощью приведенного ниже кода функции Ajax / jquery я могу получить определенное количество сообщений пользователя, и все работает нормально.

 var userId='Nancy';

function handleUpdateCount(userId) {
  var count = (mCount[userId] == undefined) ? 1 : mCount[userId]   1;
  mCount[userId] = count;
  $('#'   userId   ' label.mCount').html(count);
  $('#'   userId   ' label.mCount').show();

}

ниже показано, как я успешно отображаю результат ajax.

 <label class="mCount"></label>

Сейчас я переписываю приведенный выше код ajax / jquery для работы с reactjs. Итак, я реализовал функцию ниже
который отлично работает в React, поскольку я могу предупреждать результат счетчика в методе setState().

 handleUpdateCount = (userId) => {
const {mCount} = this.state;

     var count = mCount[userId] == undefined ? 1 : mCount[userId]   1;
     mCount[userId] = count;


 this.setState({mCount: count});
// alert the result is working
 alert(this.state.mCount);

}

В методе render я знал, что могу получить результат согласно

 {this.state.mcount amp;amp; <label>{this.state.mcount}</label> }

Вот моя проблема:
Как мне преобразовать эти две оставшиеся строки ajax-кодов в эквиваленты reactjs.

 $('#'   userId   ' label.mCount').html(count);
$('#'   userId   ' label.mCount').show();

Нужно ли мне делать что-то вроде приведенного ниже кода в reactjs или что? поскольку userId задействован в двух строках кода выше

 if(userId){

 this.setState({mCount: count});
// alert the result is working
 alert(this.state.mCount);

}

Обновленный раздел

Идентификатор пользователя для ajax или reactjs поступает из события нажатия кнопки

В Reactjs у вас будет

 <button
            onClick={() => this.handleUpdateCount(user.userId)}
          >{user.userId}</button>

В Ajax это

 usersList  = '<li id="'   user.id   '"  onclick="handleUpdateCount(this, ''   user.id   '')"><a href="javascript:void(0)">'   user.name   '101</a></li>';

Вот строка кода css, которая называется

 .mCount { color: #FFF; float: right; border-radius: 12px; border: 1px solid #2E8E12; background: #34BB0C; padding: 2px 6px; }

Ниже приведен полный код того, как я записываю функцию ajax в эквиваленты Reactjs

 import React, { Component, Fragment } from "react";
import { render } from "react-dom";


class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
     mCount: {},
    };

 this.handleUpdateCount = this.handleUpdateCount.bind(this);
  }

  componentDidMount() {

 this.setState({

      data: [
        { userId: "nancy101", name: "Nancy Mooree", info: "Hello from Nancy"},
 { userId: "joy106", name: "Joy Mooree", info: "Hello from Joy"}
      ]
    });


  }



handleUpdateCount = (userId) => {
alert(userId);
const {mCount} = this.state;

     var count = mCount[userId] == undefined ? 1 : mCount[userId]   1;
     mCount[userId] = count;

alert(count);

 this.setState({mssCount: count});
// alert the result is working
// alert(this.state.mssCount);

}





  render() {

    return (

          <div>
{this.state.mssCount}

{this.state.data.map((user, i) => {


if (user.userId !=='' amp;amp; user.name !=='') {

          return (
            <div key={i}>
       <div>   
 {user.userId}: {user.name}

<br /><button
            onClick={() => this.handleUpdateCount(user.userId)}
          >{user.userId}</button>

            </div>
              </div>
          )


  } else {







  }
        })}



          </div>

    );
  }

Комментарии:

1. Кажется, что в вашем старом коде у вас есть html-элемент с идентификатором, поэтому вы захватываете и показываете содержимое внутри. В react вам не нужно иметь все эти идентификаторы, просто перебирайте своих пользователей и создавайте, показывайте и элемент на основе доступных пользователей.

2. Спасибо за ваш вклад на данный момент. Пожалуйста, сэр Хамед, не могли бы вы предоставить мне пример кодирования о том, как с этим работать. Все еще пытаюсь сделать это правильно

3. Извините за мой предыдущий ответ. Я думаю, что я неправильно понял ваш вопрос. Я не вижу никакого идентификатора пользователя в вашем старом коде: <label class=»mCount»></label> Я думаю, что здесь я упускаю момент.

4. Пожалуйста, обновите свой вопрос, чтобы пользователи могли видеть вашу структуру DOM.

5. Здравствуйте, сэр Хамед, я обновил свой пост, как вы сказали. Пожалуйста, можете ли вы ознакомиться с обновленным разделом моего сообщения / вопроса. Спасибо

Ответ №1:

Я заявляю вслух, что это лучший способ создать функцию для достижения моей цели. поскольку я работаю с nodejs и socket.Io. Я нашел способ указывать количество пользователей вместе с идентификатором пользователя. Приведенная ниже функция по-прежнему работает идеально для меня. Спасибо

 handleUpdateCount = (userId) => {
alert(userId);
const {mCount} = this.state;

     var count = mCount[userId] == undefined ? 1 : mCount[userId]   1;
     mCount[userId] = count;
 this.setState({mssCount: count});

}