useState渲染元素后面的一个

Question

import React, { useState } from "react";
import { Form } from "react-bootstrap";
import geneList from '../data/SampleSheet.json';
import C3 from 'c3'
import C3Chart from 'c3';
import 'c3/c3.css';
const GENEDATA = [["Gnai3",501, 747, 705, 543, 689], ["genen",3,3,3,3],["Cdc45",22, 30 ,10 ,28, 29]] as [string, ...number[]][];
const GENENAMES = ["Gnai3", "genen", "Cdc45"];
export function Genes(): JSX.Element {
// This is the State (Model)
const [gene, setGene] = useState<([string, ...number[]])>(GENEDATA[0]);
const [geneName, setGeneName] = useState<string>(GENENAMES[0]);

// This is the Control
//no idea why the gene name is one behind but maybe you can figure it out
function updateGene(event: React.ChangeEvent<HTMLSelectElement>) {
setGeneName(event.target.value);
const tempGene = gene;
const changeData = GENEDATA.find((name: [string, ...number[]]): boolean => name[0] === geneName);
if(changeData === undefined){
setGene(tempGene);
alert("Gene not found!");
}
else{
alert(geneName);
setGene(changeData);
}
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
var chart = C3.generate({
bindto: '#chart',
data: {
columns: [
gene
]
},
axis: {
y: {
label:"Activation Level"
}
},
color: {
pattern: ['#ff7f0e']
},
});
// This is the View
return (
<div>
<Form.Group controlId="Genes">
<Form.Label>Pick gene to display:  </Form.Label>
<Form.Select value={geneName} onChange={updateGene}>
{ GENENAMES.map((geneName: string) =>
<option key={geneName} value={geneName}>{geneName}</option>
)}
</Form.Select>
<div id="chart"></div>
</Form.Group>
Selected Gene: {geneName}
</div>
);
}

我试图使用C3库绘制一些数据，图中使用的数据应该与当前的geneName同步，然而，当我的页面重新渲染时，geneName似乎领先于基因状态，我不知道为什么。我想这可能是因为状态更新是在函数中一起进行的，所以useState还没有设置为正确的值，这是真的。我需要我的图形数据来反映当前的geneName及其数据。

Answer 1

实际上，我在创建这篇文章后就发现了这一点。

这是因为我将我的数据名称及其各自的数据设置为当前geneName状态。因为状态直到渲染之后才会改变，所以它得到了实际的当前状态，这不是我想要的。

修复方法只是将基因设置为event.target.value，而不是geneName修复程序在我的。查找