如何在useState中同步更改状态

Question

嘿，伙计们，我是React Hooks的新手，但在谷歌上找不到它。我正在尝试嵌套setState回调，以便状态可以同步更新，但由于我得到了未定义的值，所以没有成功。状态中的值依赖于我的状态中的其他值，所以我希望它能同步运行。我试着在下面嵌套它，当它是一个类组件并使用this.setState和回调时，这是有效的，但当我尝试在函数类中使用react钩子时，这不起作用。

这是我的代码：

const [state, setState] = useState({numCols: 0, numRows: 0, cardWidth: 0, cardHeight: 0, containerWidth: 0});

const {
sheetList,
sheetsTotalCount,
sheetsMetadata,
id,
projectId,
onEditButtonClick,
handleInfiniteLoad,
sheetsAreLoading,
classes,
permissions,
onItemClick,
} = props;
const setCardSize = ({ width }) {
setState({
containerWidth: width > 0 ? width : defaultWidth
},() => { 
setState({numCols: Math.max(Math.floor(state.containerWidth / baseThumbnailWidth), 1) }, () => {
setState({numRows: Math.ceil(sheetList.size / state.numCols)}, () => {
setState({cardWidth: Math.floor(state.containerWidth / state.numCols - 2 * marginBetweenCards)}, () => {
setState({cardHeight: Math.round(state.cardWidth * thumbnailProportion)});
});
});
});
});
}

理想情况下，我希望先更新containerWidth变量，然后更新numCols变量，再更新cardWidth，然后更新cardHeight。有没有什么方法可以同步执行，这样我就不会得到未定义的值？

Answer 1

我对你想要实现的目标有点困惑。但别忘了，与类不同，每次都必须将所有属性设置为in状态。

setState({numCols: Math.max(Math.floor(state.containerWidth / baseThumbnailWidth), 1) }

此代码将用numCols替换您的所有状态。你希望状态的其余部分像这样，现在只有numCols会改变，其他一切都一样。

setState({...state, numCols: Math.max(Math.floor(state.containerWidth / baseThumbnailWidth), 1) }

接下来要记住的是，如果您想在一次渲染中多次更改状态，请使用以下形式：

setState(oldState => {...oldState, newValue: 'newValue'});

这将允许在一个渲染中使用最后一个值而不是在最后一个渲染上进行多个状态更新。例如：

const [state, setState] = useState(0); // -> closed on this state's value!
setState(state + 1);
setState(state + 1);
setState(state + 1); //State is still 1 on next render 
// because it is using the state which happened on the last render.
// When this function was made it "closed" around the value 0
// (or the last render's number) hence the term closure.

与此：

const [state, setState] = useState(0);
setState(state => state + 1);
setState(state => state + 1);
setState(state => state + 1); //State is 3 on next render.

但为什么不同步计算这些值呢？

const setCardSize = (width) => {
const containerWidth = width > 0 ? width : defaultWidth;
const numCols = Math.max(Math.floor(containerWidth / baseThumbnailWidth), 1);
const numRows = Math.ceil(sheetList.size / numCols);
const cardWidth = Math.floor(containerWidth / numCols - 2 * marginBetweenCards);
const cardHeight = Math.round(cardWidth * thumbnailProportion);
setState({containerWidth, numCols, numRows, cardWidth, cardHeight});
}

查看它讨论的文档

与类组件中的setState方法不同，useState不会自动合并更新对象。

如果使用以前的状态计算新状态，则可以传递函数来设置State。该函数将接收先前的值，并返回更新后的值。以下是计数器组件的示例使用两种形式的setState:

Answer 2

既然您正在计算依赖于另一个变量的负载，并且您希望状态同时更新，为什么不将计算拆分出来，并在最后设置一次状态呢？可读性更强，并且只需要一个setState调用。

const setCardSize = ({ width }) => {
const containerWidth = width > 0 ? width : defaultWidth;
const numCols = Math.max(Math.floor(containerWidth / baseThumbnailWidth), 1,);
const numRows = Math.ceil(sheetList.size / numCols);
const cardWidth = Math.floor(containerWidth / numCols - 2 * marginBetweenCards);
const cardHeight = Math.round(cardWidth * thumbnailProportion);
setState({ containerWidth, numCols, numRows, cardWidth, cardHeight });
};

---

要回答实际问题，如果您想使一个变量的状态更新立即(或如您所说的"同步"(更新另一个状态变量，请使用useEffect。

你只需要给useEffect两个参数：一个函数，每次因变量发生变化时都要运行，然后是一个变量数组

每个状态变量都有自己的useState，而不是像我在这里所做的那样只有一个大对象，这更干净(更快，不容易出错，通常建议用于功能组件(。

const [containerWidth, setContainerWidth] = useState(0);
const [numCols, setNumCols] = useState(0);
const [numRows, setNumRows] = useState(0);
const [cardWidth, setCardWidth] = useState(0);
const [cardHeight, setCardHeight] = useState(0);
const setCardSize = ({ width }) => setContainerWidth(width > 0 ? width : defaultWidth)
useEffect(() => setNumCols(Math.max(Math.floor(containerWidth / baseThumbnailWidth), 1)) , [containerWidth])
useEffect(() => setNumRows(Math.ceil(sheetList.size / numCols)), [numCols])
useEffect(() => setCardWidth(Math.floor(containerWidth / numCols - 2 * marginBetweenCards)), [containerWidth])
useEffect(() => setCardHeight(Math.round(cardWidth * thumbnailProportion)), [cardWidth])