使用参数设置状态

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",

当单击按钮重新加载下一页数据时，我需要访问next。(一个组件显示字符，对于那个组件我需要"https://rickandmortyapi.com/api/character/?page=2"，另一个组件显示我需要"https://rickandmortyapi.com/api/character/?page=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中更改一个小东西，如下所示：

  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的回答也是很好的解决方案。

Answer 2

这应该可以做到：

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中具有嵌套对象。