如何正确地将ajax函数重写为与JS等价的函数

使用下面的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>

在渲染方法中，我知道我可以按照

{this.state.mcount && <label>{this.state.mcount}</label> }

我需要在reactjs中执行类似下面的代码之类的操作吗？由于用户ID涉及上述两行代码

if(userId){

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

}

更新部分

ajax或reactjs的用户ID来自按钮单击事件

在Reactjs中，您将拥有

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

下面是我如何将ajax函数写入Reactjs的完整代码

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

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 !=='' && 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>

    );
  }

import React，{Component，Fragment}来自“React”；
从“react dom”导入{render}；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：[]，
mCount:{}，
};
this.handleUpdateCount=this.handleUpdateCount.bind（this）；
}
componentDidMount（）{
这是我的国家({
数据：[
{userId:“nancy101”，name:“Nancy Mooree”，info:“你好，来自Nancy”}，
{userId:“joy106”，name:“Joy moore”，info:“来自Joy的你好”}
]
});
}
handleUpdateCount=（用户ID）=>{
警报（用户标识）；
const{mCount}=this.state；
var count=mCount[userId]==未定义？1:mCount[userId]+1；
mCount[userId]=计数；
警报（计数）；
this.setState（{mssCount:count}）；
//警告结果是否有效
//警报（this.state.mssCount）；
}
render（）{
返回(
{this.state.mssCount}
{this.state.data.map（（用户，i）=>{
if（user.userId！=''&&user.name！=''）{
返回(
{user.userId}:{user.name}

this.handleUpdateCount（user.userId）}
>{user.userId}
)
}否则{
}
})}
);
}

我发现这是创建函数以实现我的目标的最佳方法。因为我正在使用nodejs和socket.Io。我找到了一种方法，可以将用户数与用户ID一起发送。下面的功能对我来说仍然是完美的。谢谢

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

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

}

---

在旧代码中，似乎有一个带有id的html元素，因此可以抓取并显示其中的内容。在react中，您不需要所有这些ID，只需在您的用户中循环，并根据可用用户创建和显示和元素。感谢您迄今为止的贡献。请哈米德先生，你能给我提供一个如何进行编码的样本吗。仍在努力纠正错误抱歉我之前的回答。我想我没有正确理解你的问题。我在你的旧代码中看不到任何用户ID：我想我遗漏了一点。请更新你的问题，以便用户可以看到你的DOM结构。你好，哈米德爵士，我已经按照你说的更新了我的帖子。请看我的帖子/问题的更新部分。谢谢

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

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 !=='' && 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>

    );
  }

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

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

}