Javascript React-SetState处理程序方法

我有一个部件出现以下情况：

当我在两个选择组件中选择两个团队（主场，客场）时，有两种方法

  const selectHomeTeamStat = evt => {
    const { value } = evt.target;
    setSelectedHomeOption(value);
    getStats(leagueId, value, 'home');
  };

  const selectAwayTeamStat = evt => {
    const { value } = evt.target;
    setSelectedAwayOption(value);
    getStats(leagueId, value, 'away');
  };

如您所见，我能够将此字符串参数“Home”和“Away”传递给

getStats

请求，以便区分和创建两种不同的状态

之后我意识到，我实际上需要团队的状态名作为参数传递给

getStats

请求，而不是字符串“Home”和“Away”

所以这个改成了

  const [selectedHomeName, setSelectedHomeName] = useState("");
  const [selectedAwayName, setSelectedAwayName] = useState("");

  const selectHomeTeamStat = evt => {
    const { value } = evt.target;
    const item = items.find(item => item.team_id == value);
    setSelectedHomeOption(value);
    setSelectedHomeName(item.name);
    console.log('Home Team Name:', selectedHomeName);
    getStats(leagueId, value, selectedHomeName);
  };

  const selectAwayTeamStat = evt => {
    const { value } = evt.target;
    const item = items.find(item => item.team_id == value);
    setSelectedAwayOption(value);
    setSelectedAwayName(item.name);
    console.log('Away Team name:', selectedAwayName);
    getStats(leagueId, value, selectedAwayName);
  };

item.name

正确返回所选团队的名称，因此我希望看到

selectedHomeName

和

selectedwayname

状态，但在我的

控制台中。log

我看不到它

console.log('Home Team Name:', selectedHomeName); => Team Name:
console.log('Away Team Name:', selectedAwayName); => Away Name:

---

所以问题是，我做错了什么？如何将这些状态传递到事件处理程序中的

getStats

，以便进行区分

这是在调用函数之前记录上一个值，因为在定义函数时，该值在作用域中

---

如果您确实想记录最终将要进入同一点状态的正确值（因为

setState

是异步的），只需记录

item.name

或者，如果您希望仅在值已处于状态后才记录该值，则应使用，将您要对其作出反应的值传递为

deps

：

// We want React to call this function every time `selectedAwayName` changes:
useEffect(() => {
  console.log('Away Team name:', selectedAwayName);
}, [selectedAwayName]);

在这里，您可以看到发生了什么以及

useffect

如何修复它：

const-App=（）=>{
const[selectedHomeName，setSelectedHomeName]=React.useState（“”）；
const[selectedAwayName，setSelectedAwayName]=React.useState（“”）；
//当组件第一次渲染时，将创建此函数，
//调用时将记录的“selectedHomeName”值就是
//当前在作用域中，即空字符串。
//当组件重新渲染时，将使用
//值当前在范围中，这是我们以前设置的值。更改时
//同样，它将记录以前的值，而不是新值：
const selectHomeTeamStat=（{target}）=>{
setSelectedHomeName（target.textContent）；
log（'PREVIOUS Home Team='，selectedHomeName）；
};
const selectAwayTeamStat=（{target}）=>{
SetSelectedWayName（target.textContent）；
log（'PREVIOUS off Team='，selectedAwayName）；
};
//我们告诉React每次“selectedHomeName”或
//`SelectedWayName`更改：
React.useffect（（）=>{
log（`CurrentTeams=${selectedHomeName}/${SelectedWayName}`）；
}，[selectedHomeName，SelectedWayName]）
返回(
主队1
主队2
客场1队
客场2队
{selectedHomeName}/{SelectedWayName}
);
}
ReactDOM.render（，document.querySelector（'#app'）
body，
钮扣{
字体系列：monospace；
}
身体，p{
保证金：0；
}
#应用程序{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
最小高度：100vh；
}
.按钮{
显示器：flex；
边际：32px0；
}
钮扣{
利润率：0.4px；
填充：8px；
边框：2件纯黑；
背景：透明；
光标：指针；
边界半径：2px；
}
.作为控制台包装{
最大高度：45px！重要；
}


及

将始终是
selectedHomeName
和
selectedWayName
的上一个值。
这是因为您在事件处理程序中设置了将在下次渲染时更新的值

您应该使用
item.name
传递到
getStats
。您可以在render或其他地方使用
selectedHomeName
和
SelectedWayName
，或者按照建议使用
useEffect

const selectHomeTeamStat = evt => {
    const { value } = evt.target;
    const item = items.find(item => item.team_id == value);
    setSelectedHomeOption(value);
    setSelectedHomeName(item.name);
    console.log('Home Team Name:', item.name);
    getStats(leagueId, value, item.name);
  };

  const selectAwayTeamStat = evt => {
    const { value } = evt.target;
    const item = items.find(item => item.team_id == value);
    setSelectedAwayOption(value);
    setSelectedAwayName(item.name);
    console.log('Away Team name:', item.name);
    getStats(leagueId, value, item.name);
  }; 

const selectHomeTeamStat = (evt) => {
    const { value } = evt.target;
    setSelectedHomeOption(value);
}

useEffect(() => {
  const item = items.find((item) => item.team_id == selectedHomeOption);
  getStats(leagueId, selectedHomeOption, item.name);
}, [leagueId, items, selectedHomeOption]);

setState
是异步的。如果在当前渲染阶段记录状态，则更新的值仅在下一次渲染时可用

要修复它，请传递当前值
item.name
或使用
useffect

const selectHomeTeamStat = evt => {
    const { value } = evt.target;
    const item = items.find(item => item.team_id == value);
    setSelectedHomeOption(value);
    setSelectedHomeName(item.name);
    console.log('Home Team Name:', item.name);
    getStats(leagueId, value, item.name);
  };

  const selectAwayTeamStat = evt => {
    const { value } = evt.target;
    const item = items.find(item => item.team_id == value);
    setSelectedAwayOption(value);
    setSelectedAwayName(item.name);
    console.log('Away Team name:', item.name);
    getStats(leagueId, value, item.name);
  }; 

const selectHomeTeamStat = (evt) => {
    const { value } = evt.target;
    setSelectedHomeOption(value);
}

useEffect(() => {
  const item = items.find((item) => item.team_id == selectedHomeOption);
  getStats(leagueId, selectedHomeOption, item.name);
}, [leagueId, items, selectedHomeOption]);

我理解此解决方案，但我在UseEffect=>“value”未定义任何未定义的值，该值应为
selectedHomeOption
，您在
setSelectedHomeOption
中使用的
setState
是异步的，表示您传递的值最终将使其进入状态，但这不是代码记录上一个值的原因。如果它是同步的，它仍然会记录以前的值。您在这里关联了两个完全不相关的想法。在本例中，items是一个空数组。当它处于使用状态时，我将复制一个codesandboxI，我接受这个答案，因为它更关注我的案例。感谢您的时间和解释谢谢，我不能使用item.name，因为我想区分item.name与主队和item.name与客队。我不确定我是否理解这方面的问题。
selectHomeTeamStat
中的
项.name
与
selectAwayTeamStat
中的项不同。无论如何，我会选择
useffect
和
useCallback
。