React开发NFT铸造页面时特定模型偶发加载失败需重渲染问题求助

你遇到的渲染异常本质是React状态更新规则问题：

• 你声明model状态时只获取了状态值，没有绑定对应的状态更新方法，直接修改model的属性或重新赋值变量，React无法检测到这部分变更，自然不会主动触发重渲染
• 只有你点击按钮修改mintAmount等其他绑定了更新方法的状态时，才会触发组件重渲染，此时页面才会读取你已经修改完成的model值，所以会出现点击后数据才正常显示的情况

按以下步骤修改MintPage.js代码即可：

1. 修改model的状态声明，补充状态更新方法

// 原代码：let [model] = useState(jsonModel);
// 替换为：
const [model, setModel] = useState(jsonModel);

2. 修改setNFTModel方法，避免直接修改原状态，返回全新的状态对象

function setNFTModel(jsonObj) {
  return {
    dna: jsonObj.dna,
    name: jsonObj.name,
    edition: jsonObj.edition,
    attributes: [...jsonObj.attributes]
  }
}

3. 修改请求回调逻辑，调用setModel主动触发状态更新和重渲染

x.onload = function () {
  const newModel = setNFTModel(JSON.parse(x.responseText));
  setModel(newModel);
  console.log(newModel);
};

• 给useEffect补充清理逻辑，移除chainChanged、accountsChanged的事件监听，避免页面切换后出现内存泄漏
• 可以把XMLHttpRequest替换为fetchAPI，代码更简洁易维护
• 不要直接修改导入的jsonModel常量，避免全局污染

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