当我进行一些输入时，getContext函数为null

Question

我在react函数中有以下代码：

function App() {
const handleChange = event => {
// let nam = event.target.name
// let val = event.target.value
// setValues({ [nam]: val})
};
const [values, setValues] = useState({
category: "",
saturation: true,
error: ""
})
const filteredIndex = (options, filterFunc, n) => {
var i=-1, j=0;
for(;j<options.length && i<n; ++j) {
i += filterFunc(options[j]);
if(i==n)
break;
}
return options[j];
}
const genFilterFunc = (takenValues) => {
var takenLookup = {};
for(var i=0; i < takenValues.length; ++i) {
takenLookup[takenValues[i]] = 1;
}
var filterFunc = function(val) {
return takenLookup[val] ? 0 : 1;
};
return filterFunc;
}
const randomColourNotUpOrLeft = (grid, row, col, options, ignoreColour) => {
var takenlist = [];
if(row > 0 && grid[row-1][col] != ignoreColour) {
takenlist.push(grid[row-1][col]);
}
if(col > 0 && grid[row][col-1] != ignoreColour) {
takenlist.push(grid[row][col-1]);
}
var filt = genFilterFunc(takenlist);
var randomIndex = Math.floor(Math.random()*(options.length-takenlist.length));
var randomColour = filteredIndex(options, filt, randomIndex);
return randomColour;
}
const fillGridSpeckled = (grid, options, nullColour) => {
for(var row=0; row<grid.length; ++row) {
for(var col=0; col<grid[row].length; ++col) {
grid[row][col] = randomColourNotUpOrLeft(grid,row,col,options,nullColour);
}
}
}
function makeGrid(gridrows, gridcols, defaultColour) {
var newGrid = [];
for(var row=0; row<gridrows; ++row) {
var thisRow = [];
for(var col=0; col<gridcols; ++col) {
thisRow.push(defaultColour);
}
newGrid.push(thisRow);
}
return newGrid;
}
function drawGrid(withGrid,tileSize) {
let ctx;
var activateDraw = (ref) => {
ctx = ref.getContext('2d');
// draw stuff
for(var row=0; row<withGrid.length; ++row) {
for(var col=0; col<withGrid[row].length; ++col) {
ctx.fillStyle = withGrid[row][col];
ctx.fillRect(row*tileSize, col*tileSize, tileSize, tileSize);
}
}
}
return <canvas id='gallery' ref={(e) => activateDraw(e)} width='500' height='500' />
}
const filterGallery = () => {
var nullColour = 'white'
var fewOptions = ['red', 'green', 'blue', 'purple', 'yellow', 'white' ];
var grid = makeGrid(5, 8, nullColour)
return fillGridSpeckled(grid, fewOptions, nullColour)
}
const { category, saturation } = values
var nullColour = 'white'
var grid = makeGrid(5, 8, nullColour)
var fewOptions = ['red', 'green', 'blue', 'purple', 'yellow', 'white' ]; // never less than 3!
var manyOptions = 'AliceBlue,AntiqueWhite,Aqua,Aquamarine,Azure,Beige,Bisque,Black,BlanchedAlmond,Blue,BlueViolet,Brown,BurlyWood,CadetBlue,Chartreuse,Chocolate,Coral,CornflowerBlue,Cornsilk,Crimson,Cyan,DarkBlue,DarkCyan,DarkGoldenRod,DarkGray,DarkGreen,DarkKhaki,DarkMagenta,DarkOliveGreen,DarkOrange,DarkOrchid,DarkRed,DarkSalmon,DarkSeaGreen,DarkSlateBlue,DarkSlateGray,DarkTurquoise,DarkViolet,DeepPink,DeepSkyBlue,DimGray,DodgerBlue,FireBrick,FloralWhite,ForestGreen,Fuchsia,Gainsboro,GhostWhite,Gold,GoldenRod,Gray,Green,GreenYellow,HoneyDew,HotPink,IndianRed,Indigo,Ivory,Khaki,Lavender,LavenderBlush,LawnGreen,LemonChiffon,LightBlue,LightCoral,LightCyan,LightGoldenRodYellow,LightGray,LightGreen,LightPink,LightSalmon,LightSeaGreen,LightSkyBlue,LightSlateGray,LightSteelBlue,LightYellow,Lime,LimeGreen,Linen,Magenta,Maroon,'.split(",");
return (
<div>
{drawGrid(grid, 50)}
{fillGridSpeckled(grid, category, nullColour)}
<div>
<input type='select' onChange={(val) => setValues({ category: val})} name='category' />
<input type="checkbox" value={saturation} name="darker" id="darker" onChange={handleChange("saturation")} />
<label >Darker</label>
<button onClick={filterGallery()} >
Click Me 
</button> 
</div>
</div>
);
}
export default App;

我想让过滤器动态地隐藏/显示那些只匹配的，并根据"类别"输入进行过滤：红色、绿色、黄色、蓝色、棕色、灰色、紫色、粉色、其他和饱和度(boolean/checbox:"深色"，每个元素都可以是随机的(。但当我填充一些输入时，它将TypeError:无法读取null的属性"getContext"。有什么建议吗？

Answer 1

使用钩子更新状态时，请确保不仅更新状态对象的一个属性，还将其与以前的状态合并。

像这样：

<input type='select' onChange={(val) => setValues(prev => ({ ...prev, category: val}))} name='category' />

此外，您正在onChange中调用handleChange函数。相反，使用箭头函数并传递event和您的数据，即saturation

处理更改：

...
const handleChange = (event, name) => {
let {checked } = event.target;
setValues(prev => ({ ...prev, [name]: checked}))
};
...
<input type="checkbox" value={saturation} name="darker" id="darker" onChange={(e) => handleChange(e, "saturation")} />