Reactjs 从React状态处理动态背景

我有一个React组件，它有一个背景图像。图像的选择是这样处理的：

状态={
图片：0
}
让背景图像；
背景图像=
“url（”+
require（`.././img/bar/${getProgressBackground（this.state.image）}`）+
")";

有一个操作按钮，一旦触发，它将计数器设置为

图像

状态：

。然后（（）=>{
活动。观看(
函数（错误、结果）{
如果（！err&&result.event==“event”）{
这是我的国家({
加载：false，
image:this.state.image+1，
});
}否则如果（错误）{
警觉的(
“发生了一个错误！”
);
}
}.绑定（此）
);
});

预期的行为是，当被触发时，按钮将

setState

image

从0变为1，然后

getProgressBackground

将选择适当的背景并根据需要进行更改

但是，我收到的是一个错误，应用程序正在循环并崩溃：

警告：setState（…）：无法在现有状态转换期间更新（例如在“render”或其他组件的构造函数中）。渲染方法应该是道具和状态的纯函数；构造函数的副作用是一种反模式，但可以移动到“componentWillMount”。

---

处理此问题并获得预期行为的正确方法是什么？

您不能像这样动态使用require

改用开关：

开关（名称）{
案例“a”：返回要求（“./a”）；
案例“b”：返回要求（“./b”）；
//等等。。。
}

如中所述

您的代码应该如下所示：

getProgressBackground=progressState=>{
案例'ready'：返回require（'/path/to/greenBg.jpg'）；
案例“inProgress”：返回require（'path/to/yellowBg.jpg'）；
}

您可以将代码粘贴到使用setState的位置吗？代码中已更新。如何在页面中使用backgroundImage，以使其在图像中呈现？谢谢您的回答，但我不知道我必须在哪里使用开关。它在渲染的内部吗？我把所有的东西都放到了一个开关盒中，但它仍然不起作用。我得到了相同的循环。我完成了我的答案，它在你的情况下看起来是什么样子。