React页面刷新时实现API返回结果随机化的onload配置问题

问题原因 #

• 你不需要额外绑定onload事件：React类组件的componentDidMount生命周期本身就会在页面首次加载、刷新后组件挂载完成时自动触发，额外写的onload回调反而不会按预期执行
• 你生成了随机偏移量random但没有实际传入接口调用：原代码里调用getMarvelResponse时传的还是原来的this.state.offset，自然不会生效
• 你写的onload = () => {...}属于全局变量赋值，既不符合React写法，执行时机也晚于componentDidMount，无法生效

修正后代码 #

handleRandom = (offset) => {
  this.getMarvelResponse(null, null, offset);
};

componentDidMount() {
  // 生成随机偏移量直接调用接口即可，不需要额外绑定onload
  const random = Math.floor(Math.random() * 1473);
  this.handleRandom(random);
}

getMarvelResponse = (id, name, offset) => {
  getCharacters({
    id: id,
    name: name,
    offset: offset,
  }).then(({ characters }) => {
    this.setState(
      {
        characters: characters.filter(
          (chr) => !chr.thumbnail.path.match(imageFound)
        ),
        selectedCard: null,
        offset: offset,
        name: name,
      },
      () => {
        console.log(this.state.characters);
      }
    );
  });
}

补充注意点 #

如果代码里写死的1473是接口返回的总数据条数，建议不要硬编码，可先调用一次接口拿到总条数再计算随机偏移量，避免后续接口数据更新后，偏移量超出有效范围导致返回空数据。

内容的提问来源于stack exchange，提问作者gaucho_el_comandante