【发布时间】：2019-09-17 19:29:01
【问题描述】：
我是反应开发的新手，我有一个反应应用程序，在 componentDidMount 上将值状态设置为“add”，它呈现 div 内容为“add”，一旦按钮单击添加 div，我就会调用addstate 方法 在哪里将值的状态设置为“编辑”，它会呈现与“编辑”相关的 div 内容，并且我通过 done 方法调用再次调用 addstate 方法。
在这种情况下，来自 addstate 方法的 fetch 调用发生在后端，但状态没有设置回 edit..它仅在 IE11 中失败。它适用于 chrome、firefox 和移动设备。 如果我删除 addstate 方法中的代码“Value：edit”，它的工作良好。但是我的需求需要根据不同的场景来渲染。所以基本上只能在 IE11 中设置一次结果的状态。它不会重复工作。
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
value: "test",
items: []
}
};
addState() {
fetch("/local/addThings").then(res => res.json())
.then(
(result) => {
this.setState({
value: "edit",
items: result
});
}
)
.catch(error => console.error('Error:', error));
}
done() {
this.setState({
value: "add"
});
}
componentDidMount() {
fetch("/local/getThings")
.then(
(result) => {
this.setState({
value: "add"
});
}
)
.catch(error => console.error('Error:', error));
}
render() {
const { value, items } = this.state;
if (value === "add") {
return <div >
<div >
<ul >
<li onClick={() => this.addState()}>
<div>
<img src="Add.png" />
<center><p>AddButton</p></center>
</div>
</li>
</ul>
</div>
</div>
;
}
if (value === "edit") {
return (<div>
<div >
<ul >
<li onClick={() => this.done()}>
<div >
<img src="Save.png" />
<center><p>SaveButton</p></center>
</div>
</li>
{items.map(item => (
<center><p>{item.name}</p></center>
</li>
))}
</ul>
</div>
</div>
);
}
}
}
ReactDOM.render(React.createElement(App, null), document.getElementById("details")); ```
【问题讨论】：
-
你是在用whatwg-fetch 之类的东西来填充
fetch功能吗？ IE11 本身不支持 Fetch API。 -
是的，我正在使用 polyfill 并使用 whatwg-fetch 进行 fetch 以在 IE11 中工作。获取对我来说工作正常..问题在于第二次值的设置状态
-
您的转译器是否将箭头函数转换为普通的
function声明？ -
是的，函数声明转换得很好。我只在 IE11 中遇到了 setstate 的问题。我的代码在 chrome 上运行良好。
-
是的，这意味着问题几乎肯定在于现代浏览器支持但 IE 不支持的许多常用 ES6+ 功能之一。您是否收到任何错误？我会尝试在您的 fetch 回调中运行
console.log(this)以查看它是否存在并正确引用该组件。获取结果也是如此。
标签： reactjs internet-explorer-11 render setstate