useState在第一次单击时不更新显示
useState在第一次单击时不更新显示
提问于 2022-02-16 15:46:23
我有一个表，它的行可以点击。一旦单击，它们应该将一个对象值加载到一些输入.value字段中。它确实做到了这一点，但只有一次同一表行被单击两次。
这里有一些图片可以解释这一点：
页被加载：
然后，单击中间记录之后：
然后，再次单击相同的记录：
我使用useState跟踪所有字符键:值对，另一个跟踪所有显示字段。但我不知道如何阻止这一错误的发生。
下面是我的onClick函数的代码，附在每个表行上：
function barkCharData(idIn){
//set the st_charData state to contain whatever character was selected
set_st_charData({
id: ar_charBin[idIn-1].id,
fName: ar_charBin[idIn-1].first_name,
sName: ar_charBin[idIn-1].second_name,
age: ar_charBin[idIn-1].age,
gender: ar_charBin[idIn-1].gender,
race: ar_charBin[idIn-1].race,
classType:ar_charBin[idIn-1].classType,
level: ar_charBin[idIn-1].level
})
console.log("After init, st_charData.id = "+st_charData.id)
//then set st_boxes to be referenced
set_st_displayBoxes({
box_id: document.getElementById("txt_idField"),
box_fName: document.getElementById("txt_fNameField"),
box_sName: document.getElementById("txt_sNameField"),
box_age: document.getElementById("txt_ageField"),
box_gender: document.getElementById("txt_genderField"),
box_race: document.getElementById("txt_raceField"),
box_class: document.getElementById("txt_classField"),
box_level: document.getElementById("txt_levelField"),
})
try{
//From usestates, updated above,
//assign the char data to the relevant box
st_displayBoxes.box_id.value = st_charData.id
st_displayBoxes.box_fName.value = st_charData.fName;
st_displayBoxes.box_sName.value = st_charData.sName;
st_displayBoxes.box_age.value = st_charData.age;
st_displayBoxes.box_gender.value = st_charData.gender;
st_displayBoxes.box_race.value = st_charData.race;
st_displayBoxes.box_class.value = st_charData.classType;
st_displayBoxes.box_level.value = st_charData.level;
}
catch(e)
{
console.log("\n\nPants were shat in:\n\t'barkCharData' function:\n" +e)
}
}下面是附加到每个文本框的onChange处理程序的代码：
{
try{
console.log("Fired the change event");
//update the useState with the change
set_st_charData({ ...st_charData, [e.target.name]: [e.target.value] });
}
catch(error){
console.log("Bowel movement detected in 'displayChangeHandler': "+error);
}
}我知道，在更新st_charData useState之前，它最初是空的，我认为这是导致我的问题的原因。问题是，我不知道怎么解决这个问题。已经尝试过寻找其他的答案，但没有设法解决。
谢谢你找我！
回答 1
Stack Overflow用户
发布于 2022-02-22 10:39:20
给了我自己关于这个的洞察力。结果很简单，这要感谢@GabrielePetroli提到了useEffect。
每次重呈现时，您都可以使用useEffect钩子触发代码。您还可以让useEffect跟踪特定的useState，并在该特定useState发生更改时重新呈现。
useEffect(() =>
{
//code you want to run each re-render
//...like updating displays
}, [<useState>,<something else>]);通过在上面的数组中添加想要作为依赖项进行跟踪的内容，您将强制这个useEffect在值发生变化时触发，并在新的呈现中更新它。
解决我的问题的方法是在我的useState函数中执行我所有的任务(用一个新单击的字符记录更新onClick )，然后让onClick在重新呈现时将相关信息粘贴到输入中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71144935
复制相关文章
相似问题
腾讯云开发者
