Javascript 如何将jQueryAjax调用返回的值分配给类变量？

AJAX调用返回数据，但如何将其分配给类变量，以便在其他方法中使用？以下是我的代码（这是reactjs组件）：

从“React”导入React；
从“jQuery”导入jQuery；
从“./list_药剂”导入列表药剂；
导出默认类药剂扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={药剂：[]}；
this.fetchPotions=this.fetchPotions.bind（this）；
this.objtostmap=this.objtostmap.bind（this）；
}
componentDidMount（）{
这个。获取药剂（）；
}
药水{
jQuery.ajax({
url:this.props.endPoint，
数据类型：“json”，
cache:false，
标题：{
“授权”：btoa（“混合随机项”）
},
成功：功能（数据）{
让药剂=这个.objtostmap（数据）；
这个.setState（{potrions}）；
}.绑定（此），
错误：函数（xhr、状态、错误）{
console.error（this.props.endPoint，status，
err.toString（））；
}.绑定（此）
});
}
obj地形图（obj）{
设strMap=newmap（）；
for（设k为对象键（obj））{
标准映射集（k，obj[k]）；
}
返回strMap；
}
render（）{
console.log（这个是药剂）；
返回(

{this.state.potions.map（（potion）=>）}

);
} 
}

---

如您所见，我正在将其分配给

this.potions

，但在

render（）

方法中，列表为空。

this.potions

可能已更新，但您的组件未使用新数据重新渲染。在React中，您可以使用

state

和

setState

轻松更新组件的内部数据。以下是您的代码（简化）：

类药剂扩展反应组件{
建造师（道具）{
超级（道具）；
this.state={药剂：[]}；
this.fetchPotions=this.fetchPotions.bind（this）；
}
componentDidMount（）{
这个。获取药剂（）；
}
药水{
//不是网络请求，我只是设置了一些示例数据。您的请求将转到这里。
常量药剂=[{id:1，名称：'first'}，{id:2，名称：'second'}]；
//我们更新状态，而不是覆盖变量（例如this.potions）
//把这个放到你的网络请求回调中！
这个.setState（{potrions}）；
}
render（）{
console.log（this.state.potations）；
返回(

{this.state.potions.map（（potion）=>
{potion.name}
）}

);
}
}
ReactDOM.render（，document.getElementById（'View'））
此。药剂可能已更新，但不会使用新数据重新呈现组件。在React中，您可以使用
state
和
setState
轻松更新组件的内部数据。以下是您的代码（简化）：


类药剂扩展反应组件{
建造师（道具）{
超级（道具）；
this.state={药剂：[]}；
this.fetchPotions=this.fetchPotions.bind（this）；
}
componentDidMount（）{
这个。获取药剂（）；
}
药水{
//不是网络请求，我只是设置了一些示例数据。您的请求将转到这里。
常量药剂=[{id:1，名称：'first'}，{id:2，名称：'second'}]；
//我们更新状态，而不是覆盖变量（例如this.potions）
//把这个放到你的网络请求回调中！
这个.setState（{potrions}）；
}
render（）{
console.log（this.state.potations）；
返回(

{this.state.potions.map（（potion）=>
{potion.name}
）}

);
}
}
ReactDOM.render（，document.getElementById（'View'））
您应该在数据为空时处理该情况

render() {
    const { potions, className } = this.state;

    if (!potions) {
      return (<p>Loading...</p>);
    } else {
      return (
          <div className="{className}">
              <ul>
                  {potions.map(potion => <li key={potion.id}>{potion.name}</li> )}
              </ul>
          </div>
      );
    }
}

render（）{
const{potations，className}=this.state；
如果（！药剂）{
返回（加载…
）；
}否则{
返回(

{potions.map（potion=>
{potion.name}
）}

);
}
}
您应该在数据为空时处理该情况

render() {
    const { potions, className } = this.state;

    if (!potions) {
      return (<p>Loading...</p>);
    } else {
      return (
          <div className="{className}">
              <ul>
                  {potions.map(potion => <li key={potion.id}>{potion.name}</li> )}
              </ul>
          </div>
      );
    }
}

render（）{
const{potations，className}=this.state；
如果（！药剂）{
返回（加载…
）；
}否则{
返回(

{potions.map（potion=>
{potion.name}
）}

);
}
}
您确定数据提取正确吗？您必须在react组件上使用
状态
。@Matí在我多次尝试在控制台中输出数据时，
数据
包含获取的值。然后，您应该使用
设置状态
通知react组件的道具已更新，需要重新设置-rendered@Matias，我将代码更新为使用setState，id仍然不能工作。您确定数据提取正确吗？您必须在react组件上使用
状态
。@Matí当我多次尝试在控制台中输出它时，
数据
包含获取的值。然后，您应该使用
设置状态
通知react组件的道具已更新，需要重新设置-rendered@Matias，我将代码更新为使用setState，id仍然不起作用。它不起作用。我更新了上面的代码以应用您的解决方案。不走运。你确定你每一点都更新了吗
this.state.potations
而不是
this.potations
无处不在。在构造函数中设置状态。错误是什么？是的，只是更新了它。错误是
未捕获类型错误：this.state.potions.map不是函数
。显然，它还没有被分配。我明白了。