Javascript 在state属性中调用restapiurl时，如何循环使用一定数量的id？

我正在使用“Rick and Morty”REST API构建一个应用程序，在文档中，我们可以使用特定的查询字符串请求493个字符中的任意数量的字符

例如，下面的URL可以请求id为34和56的字符，但是如果我们想一次请求更多的字符，我们必须提供数组中的所有id，总共有493个字符

我有一个卡片列表组件，它在卡片组件上循环并显示属性

import React from "react";
import axios from "axios";
import Card from "./Card";

class CardList extends React.Component {
  state = {
    url: `https://rickandmortyapi.com/api/character/${[...Array(493).keys()]}`,
    character: []
  };

  async componentDidMount() {
    const res = await axios.get(this.state.url);

    this.setState({
      character: res.data
    });
  }

  render() {
    return (
      <div>
        {this.state.character.map(character => (
          <Card
            key={character.id}
            id={character.id}
            name={character.name}
            status={character.status}
            species={character.species}
            gender={character.gender}
            type={character.type ? character.type : "Unknown"}
          />
        ))}
      </div>
    );
  }
}

export default CardList;

从“React”导入React；
从“axios”导入axios；
从“/Card”导入卡片；
类CardList扩展了React.Component{
状态={
网址：`https://rickandmortyapi.com/api/character/${[…数组（493）.keys（）]}`，
字符：[]
};
异步组件didmount（）{
const res=await axios.get（this.state.url）；
这是我的国家({
字符：res.data
});
}
render（）{
返回(
{this.state.character.map（character=>(
))}
);
}
}
导出默认卡片列表；

我想做的是：

我想在“state”中编写一个函数，将数组从1填充到493，但是在哪里编写函数呢

我想做的是：

我尝试在状态中使用模板字符串，并编写了一个函数为数组创建一个范围 如下

---

url:`${function loop（）{var x=0；虽然（x您的示例似乎做了您想要做的事情，但您只是缺少包装方括号。更改为：

const url=`https://rickandmortyapi.com/api/character/[${[…数组（493.keys（）]}]`；

---

顺便说一句，似乎没有任何理由将其保留在状态中。建议将其移动到状态之外的常量。

基本上您的代码是可以的。您不需要将任何内容保留在状态中。如果您需要计算一组不同的ID，我建议您在

componentDidMount（）中运行代码

在通过Axio发出HTTP请求之前，或在方法或纯函数内部：

  ...

  getUrl(count) {
    // Array indexes start from 0 we wanna map them and add 1
    // and at the end we join them with a comma `,`
    const ids = Array(count).fill(null).map((_, idx) => idx +1).join(','); // '1,2,3...,300'
    return `https://rickandmortyapi.com/api/character/[${ids}]`;
  }
  async componentDidMount() {
    const res = await axios.get(this.getUrl(300));

    this.setState({
      character: res.data
    });
  }

---

为什么不把它写在componentDidMount中呢？当然可以，但是我如何在状态中传递它呢？你不需要将它们保持在状态中。你需要多次获取并将结果设置为状态：）一个详细的代码会让人非常感激，肯定会在一个比特中发布一个简单的解决方案。是的，这会起作用，但我想在那里写一个函数名，然后将函数定义到我的componentDIdMount（）中……比如const url=

https://rickandmortyapi.com/api/character/[function loop（）]

；然后在componentDidMount（）中编写函数定义，但我确信我在这里做错了什么是的，这完成了工作，还有一件事，如果我想在“状态”中使用模板字符串编写函数名，并在componentDidMount中定义定义，该怎么办()，为什么这不起作用？如果你坚持你需要保持url的状态，为什么不在类构造函数中编写你的逻辑呢？这是你可以设置状态的第一个地方。事实上，你所看到的状态分配被转换为同一个类内构造函数这里有一个更新的链接，用来回答你的问题，把所有的东西都放进去字符串模板也应该可以工作。但是，非常有趣的是，如果我在“状态”内的URL中定义函数名，并在componentDidMount（）中编写函数的逻辑，它将无法工作，因为componentDidMount（）首先加载，并且它没有任何函数名（实际上处于状态）根据我提供的逻辑，我希望我是对的