我是React JS的新手（就像今天刚刚开始的那样）。我不太明白setState是如何工作的。我将React和Easel JS结合起来根据用户输入绘制网格。这是我的JS bin： http://jsbin.com/zatula/edit?js,output
以下是代码：
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")
);
当您使用其中一个下拉列表更改行数或列数时，您可以在JS bin中看到，第一次不会发生任何事情。下次更改下拉列值时，网格将绘制到先前状态的行和列值。我猜这发生了，因为我的this.drawGrid（）函数在setState完成之前执行。也许还有另一个原因？
感谢您的时间和帮助！
答案 0 :(得分：277)
setState(updater[, callback])是一个异步函数：
https://facebook.github.io/react/docs/react-component.html#setstate
你可以在setState完成后使用第二个参数callback执行一个函数，如：
this.setState({
someState: obj
}, () => {
this.afterSetStateFinished();
});
答案 1 :(得分：28)
render重新渲染组件时，如果有更改，将调用 setState。如果您将来电转移到drawGrid而不是通过update*方法调用，则不应该出现问题。
如果这对你不起作用，那么setState的重载也会将回调作为第二个参数。你应该能够利用它作为最后的手段。
答案 2 :(得分：10)
当收到新的道具或状态时（就像你在这里调用setState），React会调用一些名为componentWillUpdate和componentDidUpdate的函数
在您的情况下，只需添加componentDidUpdate函数即可调用this.drawGrid()
这是JS Bin
中的工作代码正如我所提到的，在代码中，componentDidUpdate
this.setState(...)
然后componentDidUpdate内部将调用this.drawGrid()
在React https://facebook.github.io/react/docs/component-specs.html#updating-componentwillupdate
中详细了解生命周期中的组件答案 3 :(得分：8)
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(() => {...});
这在 React 16.4中运行良好，但我还没有在早期版本的 React 中测试过它。
另外值得一提的是，在componentDidUpdate方法中保留回调代码是大多数情况下的一种更好的做法 - 可能是所有情况。
答案 4 :(得分：2)
使用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>
))}
</>
);
};
答案 5 :(得分：1)
我必须在更新状态后运行一些函数，而不是在每次更新状态时运行。
我的场景：
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() 将接收更新后的状态，这正是我想要的。
答案 6 :(得分：0)
这是一个更好的实现
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();
});