reactjs - 为什么 this.setState 在我的情况下有效
问题描述
我只是想创建一个非常简单的应用程序,我将输入一个数字,计算机将生成带有该数字的框,并一次随机更改一个框的颜色。代码有效,但我不明白它为什么有效,在 randomBlinking 函数中,我只需要 this.setState({}) 或更奇怪,我可以在 this.setState({}) 和代码将相同,它将每 1 秒更改一个随机框的颜色。我将我的应用程序减少到我不理解的部分,有人可以帮我回答这个问题。
import React from 'react';
import CubeRender from '../therapeuticEffect/CubeRender';
import '../therapeuticEffect/style.css';
class TherapeuticEffect extends React.Component {
constructor(props) {
super(props)
this.state = {
cubeArray: [],
cubeNumber: 0,
cubeSize: 100,
}
this.blinking = null;
}
onNumberChange = (event) => {
this.setState({ [event.target.name]: event.target.value })
}
onFormSubmit = (event) => {
event.preventDefault();
clearInterval(this.blinking);
this.cubeArrayRender();
}
cubeArrayRender = () => {
let { cubeNumber } = this.state;
let cubes = parseInt(cubeNumber, 10);
let array = cubes ? Array(cubes).fill() : [];
let cubeArray = array.length === 0 ? [] : array.map((c) => (this.randomColor()));
this.setState({ cubeArray })
this.randomBlinking();
}
randomBlinking = () => {
this.blinking = setInterval(() => {
const array = this.state.cubeArray;
const randIndex = Math.floor(Math.random() * array.length);
array[randIndex] = this.randomColor();
//HOW COULD THIS WORK
this.setState({})
}, 500);
}
randomColor = () => {
let r = Math.floor(Math.random() * 256);
let g = Math.floor(Math.random() * 256);
let b = Math.floor(Math.random() * 256);
let color = `rgb(${r}, ${g}, ${b})`
return color;
}
render() {
const { cubeArray, cubeNumber, cubeSize } = this.state
return (
<div>
<form className='menu-bar' onSubmit={this.onFormSubmit}>
<div>
<label>cube number </label>
<input type='number' name='cubeNumber' value={cubeNumber} onChange={this.onNumberChange} />
</div>
</form>
<CubeRender
cubeArray={cubeArray}
cubeSize={cubeSize}
/>
</div>
)
}
}
解决方案
您正在通过编写直接改变您的状态array[randIndex] = this.randomColor()
。仅此一项(不推荐)不会重新渲染您的组件。然后,当您编写this.setState({});
组件时,将使用您刚刚变异的状态重新渲染。
您可以改为创建cubeArray
数组的副本并用随机颜色覆盖随机索引并用它更新您的状态。
randomBlinking = () => {
this.blinking = setInterval(() => {
this.setState(previousState => {
const cubeArray = [...previousState.cubeArray];
const randIndex = Math.floor(Math.random() * cubeArray.length);
cubeArray[randIndex] = this.randomColor();
return { cubeArray };
});
}, 500);
};
推荐阅读
- python - 处理来自 DynamoDB 的响应 - Python
- sql - 来自两台服务器的 SQL Join 请求
- ios - 如何使特定侧的 UIVIEW 圆角半径不同?
- ios - 迭代 StackView,Swift
- javascript - 在邮递员的获取请求上加载“发送请求”
- javascript - 我需要一个全面的正则表达式来创建一个连字符的单词链接
- sql - 在 SQL Server 中根据 ID 查找数字的平均值
- jpa - 高级 JPA 查询/子查询
- ios - CollectionView didDeselectItemAt 没有被调用 CollectionView 中的单选
- php - 致命错误:require():需要打开失败