将反应钩子中的 setState 回调替换为 useEffect 钩子，用于复杂场景不起作用

Question

嗨，我有一个场景，在特定场景中，我需要在 react 钩子中设置新状态后用 React_hooks 替换 setState 回调。

当前代码为：

const ThemeOptions = () => {
const [previewType, setPreviewType] = useState("Desktop");
const [previewUrl, setPreviewUrl] = useState("");
const [layout, setLayout] = useState(null);
const [saving, setSaving] = useState(false);
const handleSave = (newdata) => {
setLayout(newdata);
setSaving(true);
axios
.put(window.urls.save, this.state.layout)
.then(
function(response) { // i want this to change in hooks
this.setState(
{
layout: response.data,
saving: false,
},
function() {
this.refs["preview"].refresh();
}
);
}.bind(this)
)
.catch(
function(error) {
console.log(error);
setSaving(false);
}.bind(this)
);
}
return (
<div>
<Router>
<div className="theme_options">
<div className="row" style={{ height: 100 + "vh" }}>
<Sidebar
layout={layout}
onSave={handleSave}
onReset={this.handleReset}
previewType={previewType}
onChangeScreen={handlePreviewScreenChange}
saving={saving}
/>
<div className="col main">
<span className="d-none d-md-block">
<Preview
ref="preview"
type={this.state.previewType}
url={this.state.previewUrl}
/>
</span>
</div>
</div>
</div>
</Router>
</div>
)
}

我希望在钩子中更改 axios.put 请求的成功回调函数，因为在上面的代码中，使用了 setState 以及其中的回调。

要重构的主要代码是：

this.setState(
{
layout: response.data,
saving: false,
},
function() {
this.refs["preview"].refresh();
}
);

我在想做：：

useEffect(()=> {
// i dont know what to put there...
),[]);

我希望 setState(( 中的回调发生在反应钩子中。考虑到上面的代码，请向我建议一种理想的方法。

Answer 1

所以这是一个非常简单但困难的难题，许多人发现很难解决。使用以下代码，它肯定会完美地运行和执行其任务： 在状态下添加一个额外的标志"isError"：

const [layout, setLayout] = useState(null);
const [saving, setSaving] = useState(false);
const [iserror, setIserror] = useState(true);

并使用如下所示的useEffect。第一次使用效果将运行，但由于使用效果中的条件是特定类型的，它根本不会运行 IF 块。并且 IF 块将仅在下面提到的特定条件下运行。但请注意，每次任何依赖数组元素更改时，useEffect 都会运行，但 IF 块根本不会执行。

useEffect(()=>{
if(layout && !saving && !iserror){
console.log('specific case render ');
this.refs["preview"].refresh();
}
},[layout,saving,iserror]);

如果我们将状态的默认条件放在 IF 块中，那么只有 IF 块内部效果会运行，但如上所述并非如此。因为我们希望 setState 回调仅在某些特定条件之后运行，而不是总是如此。 如果我们将上面的代码更改为这样的代码，那么：

//for understanding purpose only default states
layout==null,
saving == false
isError== true
//
useEffect(()=>{
if(layout == null && !saving && iserror){ //observe this default case
console.log('default case render ');
}
},[layout,saving,iserror]);

handleSave 函数只需很少更改即可完成其任务：

const handleSave = (newdata) => {
setLayout(newdata); // useEffect run as layout changed but conditions 
// not satisfied
setSaving(true);  // useEffect will run since saving changed
// not satisfied
axios
.put(window.urls.save, layout)
.then(
function(response) { // only this case forces the code in 
// useEffect to run as 3 below cases are 
// satisfied
setLayout(response.data);
setSaving(false);
setIserror(false);
}.bind(this)
)
.catch(
function(error) {
console.log(error);
setSaving(false);// only 2 case satisfied i.e layout before 
// axios line and saving but not iserror.
setIserror(true);
}.bind(this)
);
}

希望对您有所帮助。

Answer 2

setState 是异步的。在您的情况下，在 setLayout 更新之前执行的 axios

const handleSave = (newdata) => {
axios
.put(window.urls.save, this.state.layout)
.then(
function(response) { // i want this to change in hooks
setLayout(response.data);               
setSaving(false);
this.refs["preview"].refresh();
}.bind(this)
)
.catch(
function(error) {
console.log(error);
setSaving(false);
}.bind(this)
);
}

useEffect(()=>{
setLayout(newdata);
setSaving(true);
if(newData) handleSave(newData)
},[newData,saving])

并在保存功能时使用设置更改。

<Sidebar
layout={layout}
onSave={(data)=>setLayout(data)}
onReset={this.handleReset}
previewType={previewType}
onChangeScreen={handlePreviewScreenChange}
saving={saving}
/>