Javascript Can'；t在react中设置状态

所以，我只是想在我的react应用程序中设置状态。只需从Axios获取数据，然后设置状态。但无论我做什么，国家都不会设定。由于它是异步的，所以我尝试将它放在回调中，并将它放在我的组件上，而组件没有更新任何内容。有什么建议吗

class App extends Component {
  componentDidUpdate() {}

  constructor(props) {
    super(props);
    this.state = {
      Catogories: [
        "Business",
        "Entertainment",
        "General",
        "Health",
        "Science",
        "Sports",
        "Technology"
      ],
      CatPics: [],
      TopStories: [],
      Selection: [],
      Sources: [],
      selected: false
    };
  }
  GeneratePic = () => {
    this.state.Catogories.forEach(Catogory => {
      axios
        .get(
          "https://api.pexels.com/v1/search?query=" +
            Catogory +
            "&per_page=15&page=1",
          {
            Authorization:
              "563492ad6f91700001000001d33b5d31a9a145b78ee67e35c8e6c321"
          }
        )
        .then(res => {
          var object = { Catogory: res.photos[0].src.large2x };
          this.state.CatPics.push(object);
        });
    });
  };
  dump = x => {
    this.setState({ TopStories: x }, console.log(this.state.TopStories));
  };
  TopStories = () => {
    console.log("working");
    axios
      .get(
        "https://newsapi.org/v2/top-headlines?country=us&apiKey=91bec895cf8d45eaa46124fb19f6ad81"
      )
      .then(res => {
        console.log(res);
        const data = res.data.articles;
        console.log(data);
        this.dump(data);
      });
  };

---

你做错了两件事

不要改变状态

不要在循环内执行异步操作，然后在异步回调内使用相同的循环变量，因为在该时间点，循环变量将具有其他值，而不是相应的迭代类别

getPics=cat=>{
返回轴
.得到(
"https://api.pexels.com/v1/search?query=" +
猫+
“&per_page=15&page=1”，
{
授权：
“563492AD6F9170000100001D33B5D31A9A145B78EE67E35C8E6C321”
}
)
。然后（res=>{
返回{[cat]：res.photos[0].src.large2x}；
});
}
GeneratePic=async（）=>{
const promises=this.state.Catogories.map（Catogory=>{
这个.getPics（Catogory）；
});
让照片=等待承诺。全部（承诺）；
this.setState（{CatPics:photos}）；
};这应该行得通

不要改变状态

 GeneratePic = () => {
        this.state.Catogories.forEach(async Catogory => {
            await axios
                .get(
                    "https://api.pexels.com/v1/search?query=" +
                    Catogory +
                    "&per_page=15&page=1", {
                        Authorization: "563492ad6f91700001000001d33b5d31a9a145b78ee67e35c8e6c321"
                    }
                )
                .then(res => {
                    var object = { Catogory: res.data.photos[0].src.large2x };
                    const cPics = [...this.state.CatPics];
                    cPics.push(object);
                    this.setState({
                        CatPics: cPics
                    })
                });
        });
    };

this.state.CatPics.push
改变状态。请改用
this.setState
函数，并始终避免对当前（或旧）状态对象进行变异。这是否回答了您的问题？另一个可能的重复：也是，但您只是直接放置了一个
控制台.log
，它不会做您认为它会做的事情。如果您认为代码示例不可运行，请不要使用可运行堆栈片段。您可以通过缩进4个空格或用3个回号围绕代码来创建格式化的代码块。此外，在第二个示例中，您正在
getPics
函数中使用
Category
，该函数可能应该是
cat
。@emilebergron right。我只是想告诉OP怎么做。顺便说一句，谢谢，让我来修理this@EmileBergeron更新了答案不是我否决了你，但我认为你应该解释一下你的代码是什么。在堆栈溢出中，只使用代码的答案通常不受欢迎。非常感谢，这段代码确实有效。虽然我对async/Wait有很好的理解，但我不确定为什么会这样，我一直在尝试将这一概念应用到我的其他函数（TopStories（）），但我不知道如何实现，因为我不是100%了解它的工作原理。但确实如此，谢谢你，所以我投了赞成票：）
 GeneratePic = () => {
        this.state.Catogories.forEach(async Catogory => {
            await axios
                .get(
                    "https://api.pexels.com/v1/search?query=" +
                    Catogory +
                    "&per_page=15&page=1", {
                        Authorization: "563492ad6f91700001000001d33b5d31a9a145b78ee67e35c8e6c321"
                    }
                )
                .then(res => {
                    var object = { Catogory: res.data.photos[0].src.large2x };
                    const cPics = [...this.state.CatPics];
                    cPics.push(object);
                    this.setState({
                        CatPics: cPics
                    })
                });
        });
    };