Question

不确定我要做什么，但是

    state = {
    characters: [],
    planets: [],
    search: "",
    selectedCharacter: null
  };

componentDidMount() {
    this.fetchSomeData(
      "https://rickandmortyapi.com/api/character/",
      "characters"
    );
    this.fetchSomeData("https://rickandmortyapi.com/api/location", "planets");
  }

  fetchSomeData = (url, stateToSet) => {
    fetch(url)
      .then(res => res.json())
      .then(data => this.setState({
        [stateToSet]: data.results,
        next: data.info.next,
        prev: data.info.prev
      }))
      .catch(err => alert(err));
  };

我有一个字符页面，一个行星页面与api显然都有两个不同的端点

https://rickandmortyapi.com/api/character/

https://rickandmortyapi.com/api/location/

我遇到的问题：什么时候 componentDidMount（）{ } 运行它获取两组数据，然后存储两者处于下一个状态的下一个页面端点

"https://rickandmortyapi.com/api/location/?page=2"
"https://rickandmortyapi.com/api/character/?page=2",

单击按钮以重新加载下一页数据时，我需要访问下一个。（一个组件显示字符，为此我需要“ https://rickandmortyapi.com/api/character/?page=2”，其中一个组件显示行星，我需要“ https://rickandmortyapi.com/api/character/?page=2”，）我该如何分别存储这2个？

我正在考虑尝试将它们与各自的端点进行匹配，如下所示：

fetchSomeData = (url, stateToSet) => {
    fetch(url)
      .then(res => res.json())
      .then(data => this.setState({
        [stateToSet]: data.results,
        **[stateToSet]next: data.info.next,**
        prev: data.info.prev
      }))
      .catch(err => alert(err));
  };

但是我不确定您是否可以像这样将参数合并到其中。

Answer 1

这应该做到：

fetchSomeData = (url, stateToSet) => {
    fetch(url)
      .then(res => res.json())
      .then(data => this.setState({
        [stateToSet]: {
          results: data.results,
          next: data.info.next,
          prev: data.info.prev
        }
      }))
      .catch(err => alert(err));
  };

然后您可以像这样访问它：

this.state.characters.next
this.state.planets.next

这里的一般课程是您可以在this.state内嵌套对象。

Answer 2

您需要在fetchSomeData中更改以下内容：

  fetchSomeData = (url, stateToSet) => {
    fetch(url)
      .then(res => res.json())
      .then(data => this.setState({
        [stateToSet]: data.results,
        [`${stateToSet}-next`]: data.info.next,
        [`${stateToSet}-prev`]: data.info.prev
      }))
      .catch(err => alert(err));
  };

使用了[{${stateToSet}-next]模板文字。希望对您有所帮助，demo

这将打印：

    {
     characters: Array[20], 
     characters-next: "https://rickandmortyapi.com/api/character/?page=2"
     characters-prev: ""
     planets: Array[20], 
     planets-next: "https://rickandmortyapi.com/api/location?page=2"
     planets-prev: ""
     search: "", 
     selectedCharacter: ""
  }

和@Croolsby的答案也是不错的解决方案。

用参数设置状态

2 个答案: