Javascript 如何在用户单击单选按钮之前更新useState变量？

我创建了一个简单的应用程序，允许用户输入employeeName，然后进行选择来描述员工

当用户从输入更改employeeName onClick时，它会更新所有单选按钮选项。但是，它不会更新您选择的：${employeeName}已经取得了非常好的进展，显示为红色，直到他们单击另一个单选按钮，强制更新

如何使此行更新以显示新的employeeName

谢谢

---

我认为这是因为当您第一次呈现选项组件时，isRadio是未定义的。这就是为什么当你点击收音机时，你会看到你选择的：…

这是因为你只在按下单选按钮时运行setIsRadio。在Options.js中添加一个变量，该变量将存储选定的值，并在employeeName更改时更新

对于每个输入，您还需要添加：

onChange={() => {
  setIsRadio(options.excellent);
  // excellent, satisfactory, etc...
  setPicked('excellent');
}}

---

检查此链接并查找选项组件中的差异

更新employeeName时，您的选项组件也会重新呈现。如果用户从单选按钮中选择了任何选项，则isRadio将设置为从传递到选项组件的选项数组中的硬编码值。在重新呈现期间，输出相同的硬编码值，而不是新更新的employeeName

例如： 第一次员工姓名->“Harry”

如果检查无线电，伊斯拉迪奥会得到“哈里取得了优异的|差的|令人满意的进步”的价值

第二次更新employeeName->“Ram”

第一次的isRadio值是“Harry取得了优秀的|差的|令人满意的进步”，这不是未定义的，并在屏幕上得到输出

---

因此，与其将isRadio的值设置为硬编码字符串，不如将object options的键存储起来，并在下一次将值显示为options[isRadio]。请在您的答案中包含相关信息，以提高质量和可读性。非常感谢您的评论，我今天一定会尝试一下。伟大的解决方案，真的帮助我理解了更好的使用useEffect的方法，并且还在努力将它应用到现实世界的项目中，所以这太棒了！

onChange={() => {
  setIsRadio(options.excellent);
  // excellent, satisfactory, etc...
  setPicked('excellent');
}}