在获取期间处理对象返回“未定义”

Question

我正在获取狗的 API，它返回一个对象。 我想在转换之前对对象进行更改 它到一个数组和 setState() 它。 问题是它返回“未定义”。 我认为该功能没问题，因为如果我在 fetch 之外运行它确实可以工作，或者我在这里遗漏了什么？

componentDidMount() {
    fetch("https://dog.ceo/api/breeds/list/all")
      (res => res.json())
      .then(res => res.message)
      .then(res => this.processReq(res)) // <--- undefined
      .then(res => Object.entries(res))
      .then(res => this.setState({ allBreeds: res }));
  }

  processReq = breed =>
    Object.keys(breed).forEach(key => {
      if (key === "australian") {
        breed["shepherd"] = [key];
        delete breed[key];
      } else if (key === "germanshepherd") {
        breed["shepherd"].push("german");
        delete breed[key];
      }
    });

有没有办法在获取期间操作对象？ 或者将它设置为数组然后处理它会更容易？

Answer 1

实际上forEach 函数没有返回任何东西，所以它给出了undefined，你应该把它改成：

processReq = breed => {
    Object.keys(breed).forEach(key => {
      if (key === "australian") {
        breed["shepherd"] = [key];
        delete breed[key];
      } else if (key === "germanshepherd") {
        breed["shepherd"].push("german");
        delete breed[key];
      }
    });
    return breed;
}

Answer 2

processReq 函数没有返回语句，所以它只返回undefined。只需在其末尾加上return breed; 即可。