我可以在setState完成更新后执行一个函数吗?

我对ReactJS很陌生(今天才开始)。我不太明白setState是如何工作的。我结合React和Easel JS根据用户输入绘制网格。这是我的JS bin: http://jsbin.com/zatula/edit?js,output < / p >

代码如下:

    var stage;
   

var Grid = React.createClass({
getInitialState: function() {
return {
rows: 10,
cols: 10
}
},
componentDidMount: function () {
this.drawGrid();
},
drawGrid: function() {
stage = new createjs.Stage("canvas");
var rectangles = [];
var rectangle;
//Rows
for (var x = 0; x < this.state.rows; x++)
{
// Columns
for (var y = 0; y < this.state.cols; y++)
{
var color = "Green";
rectangle = new createjs.Shape();
rectangle.graphics.beginFill(color);
rectangle.graphics.drawRect(0, 0, 32, 44);
rectangle.x = x * 33;
rectangle.y = y * 45;


stage.addChild(rectangle);


var id = rectangle.x + "_" + rectangle.y;
rectangles[id] = rectangle;
}
}
stage.update();
},
updateNumRows: function(event) {
this.setState({ rows: event.target.value });
this.drawGrid();
},
updateNumCols: function(event) {
this.setState({ cols: event.target.value });
this.drawGrid();
},
render: function() {
return (
<div>
<div className="canvas-wrapper">
<canvas id="canvas" width="400" height="500"></canvas>
<p>Rows: { this.state.rows }</p>
<p>Columns: {this.state.cols }</p>
</div>
<div className="array-form">
<form>
<label>Number of Rows</label>
<select id="numRows" value={this.state.rows} onChange={ this.updateNumRows }>
<option value="1">1</option>
<option value="2">2</option>
<option value ="5">5</option>
<option value="10">10</option>
<option value="12">12</option>
<option value="15">15</option>
<option value="20">20</option>
</select>
<label>Number of Columns</label>
<select id="numCols" value={this.state.cols} onChange={ this.updateNumCols }>
<option value="1">1</option>
<option value="2">2</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="12">12</option>
<option value="15">15</option>
<option value="20">20</option>
</select>
</form>
</div>
</div>
);
}
});
ReactDOM.render(
<Grid />,
document.getElementById("container")
);

您可以在JSbin中看到，当您使用其中一个下拉菜单更改行数或列数时，第一次不会发生任何事情。下次更改下拉值时，网格将绘制到前一个状态的行值和列值。我猜测这是因为我的this.drawGrid()函数在setState完成之前执行。也许还有别的原因?

谢谢你的时间和帮助!

278330 次浏览
小开

render将在每次你setState以重新呈现组件时被调用，如果有变化的话。如果你将调用移动到drawGrid，而不是在update*方法中调用它，你应该不会有问题。

如果这对你不起作用，还有setState的重载，它将回调作为第二个参数。作为最后的手段，你应该可以利用这一点。

小开

当接收到新的道具或状态时(比如这里调用setState)， React将调用一些函数，这些函数被称为componentWillUpdate和componentDidUpdate

在你的情况下，只需要添加一个componentDidUpdate函数来调用this.drawGrid()

这里是JS本中的工作代码

正如我提到的，在代码中，componentDidUpdate将在this.setState(...)之后被调用

那么内部的componentDidUpdate将调用this.drawGrid()

在React https://facebook.github.io/react/docs/component-specs.html#updating-componentwillupdate中阅读有关组件生命周期的更多信息

小开
最佳答案

setState(updater[, callback])是一个async函数:

https://facebook.github.io/react/docs/react-component.html#setstate

你可以在setState结束后使用第二个参数callback执行一个函数，比如:

this.setState({
someState: obj
}, () => {
this.afterSetStateFinished();
});

React函数组件中的钩子也可以做到这一点:

https://github.com/the-road-to-learn-react/use-state-with-callback#usage

看看useStateWithCallbackLazy:

import { useStateWithCallbackLazy } from 'use-state-with-callback';


const [count, setCount] = useStateWithCallbackLazy(0);


setCount(count + 1, () => {
afterSetCountFinished();
});
小开

使setState返回Promise

除了将callback传递给setState()方法外，你还可以将它包裹在async函数周围，并使用then()方法——在某些情况下，这可能会产生更清晰的代码:

(async () => new Promise(resolve => this.setState({dummy: true}), resolve)()
.then(() => { console.log('state:', this.state) });

在这里，你可以更进一步，创建一个可重用的setState函数，在我看来，它比上面的版本更好:

const promiseState = async state =>
new Promise(resolve => this.setState(state, resolve));


promiseState({...})
.then(() => promiseState({...})
.then(() => {
...  // other code
return promiseState({...});
})
.then(() => {...});

这在反应 16.4中工作得很好，但我还没有在反应的早期版本中测试它。

另外值得一提的是，在大多数情况下，将回调代码保存在componentDidUpdate方法中是一个更好的实践——可能是所有情况。

小开

在React 16.8以后的钩子中，使用useEffect很容易做到这一点

我已经创建了CodeSandbox来演示这一点。

useEffect(() => {
// code to be run when state variables in
// dependency array changes
}, [stateVariables, thatShould, triggerChange])

基本上，useEffect与状态变化同步，这可以用于渲染画布

import React, { useState, useEffect, useRef } from "react";
import { Stage, Shape } from "@createjs/easeljs";
import "./styles.css";


export default function App() {
const [rows, setRows] = useState(10);
const [columns, setColumns] = useState(10);
let stage = useRef()


useEffect(() => {
stage.current = new Stage("canvas");
var rectangles = [];
var rectangle;
//Rows
for (var x = 0; x < rows; x++) {
// Columns
for (var y = 0; y < columns; y++) {
var color = "Green";
rectangle = new Shape();
rectangle.graphics.beginFill(color);
rectangle.graphics.drawRect(0, 0, 32, 44);
rectangle.x = y * 33;
rectangle.y = x * 45;


stage.current.addChild(rectangle);


var id = rectangle.x + "_" + rectangle.y;
rectangles[id] = rectangle;
}
}
stage.current.update();
}, [rows, columns]);


return (
<div>
<div className="canvas-wrapper">
<canvas id="canvas" width="400" height="300"></canvas>
<p>Rows: {rows}</p>
<p>Columns: {columns}</p>
</div>
<div className="array-form">
<form>
<label>Number of Rows</label>
<select
id="numRows"
value={rows}
onChange={(e) => setRows(e.target.value)}
>
{getOptions()}
</select>
<label>Number of Columns</label>
<select
id="numCols"
value={columns}
onChange={(e) => setColumns(e.target.value)}
>
{getOptions()}
</select>
</form>
</div>
</div>
);
}


const getOptions = () => {
const options = [1, 2, 5, 10, 12, 15, 20];
return (
<>
{options.map((option) => (
<option key={option} value={option}>
{option}
</option>
))}
</>
);
};
小开
我必须在更新状态后运行一些函数，而不是每次更新状态。
我的场景:< / p > 
const [state, setState] = useState({
matrix: Array(9).fill(null),
xIsNext: true,
});


...
...


setState({
matrix: squares,
xIsNext: !state.xIsNext,
})
sendUpdatedStateToServer(state);
这里sendUpdatedStateToServer()是更新状态后必须运行的函数。 我不想使用useEffect()，因为我不想在每次状态更新后运行sendUpdatedStateToServer()

对我有用的是:

const [state, setState] = useState({
matrix: Array(9).fill(null),
xIsNext: true,
});


...
...
const newObj = {
matrix: squares,
xIsNext: !state.xIsNext,
}
setState(newObj);
sendUpdatedStateToServer(newObj);

我只是创建了一个新对象，它是函数在状态更新后运行所需的，并简单地使用它。在这里，setState函数将继续更新状态，而sendUpdatedStateToServer()将接收更新后的状态，这就是我想要的。

小开

下面是一个更好的实现

import * as React from "react";


const randomString = () => Math.random().toString(36).substr(2, 9);


const useStateWithCallbackLazy = (initialValue) => {
const callbackRef = React.useRef(null);
const [state, setState] = React.useState({
value: initialValue,
revision: randomString(),
});


/**
*  React.useEffect() hook is not called when setState() method is invoked with same value(as the current one)
*  Hence as a workaround, another state variable is used to manually retrigger the callback
*  Note: This is useful when your callback is resolving a promise or something and you have to call it after the state update(even if UI stays the same)
*/
React.useEffect(() => {
if (callbackRef.current) {
callbackRef.current(state.value);


callbackRef.current = null;
}
}, [state.revision, state.value]);


const setValueWithCallback = React.useCallback((newValue, callback) => {
callbackRef.current = callback;


return setState({
value: newValue,
// Note: even if newValue is same as the previous value, this random string will re-trigger useEffect()
// This is intentional
revision: randomString(),
});
}, []);


return [state.value, setValueWithCallback];
};

用法:

const [count, setCount] = useStateWithCallbackLazy(0);


setCount(count + 1, () => {
afterSetCountFinished();
});
小开

虽然这个问题是通过类组件来解决的，因为新的创建组件的推荐方式是通过函数，但这个答案是从react v16中引入的函数钩子来解决这个问题的

import { useState, useEffect } from "react";


const App = () => {
const [count, setCount] = useState(0);
useEffect(() => console.log(count), [count]);
return (
<div>
<span>{count}</span>
<button onClick={() => setCount(count + 1)}>Click Me</button>
</div>
);
};

正如你在这个例子中看到的，这是一个简单的计数器组件。但是本例的useEffect钩子有第二个参数，作为依赖项数组(它可能依赖的依赖状态)。因此，如果count被更新，钩子只有就会运行。当传递空数组时，useEffect只运行一次，因为没有依赖状态变量供它侦听。< br > < br > 一个简单但有效的指南反应钩子- 10 React hook解释| Fireship


提交答案