React点击按钮传递place._id给弹窗内组件后ID异常如何解决

问题修复方案 #

• 修复setState异步导致的取值误区
  React中useState的更新逻辑是异步批量执行的，你在editPlace方法中刚调用setPlaceToEdit就打印placeToEdit，拿到的永远是更新前的旧值，并非实际传入的placeId，这是最常见的判断误区，直接打印传入的placeId即可验证传参正确性。
• 修复初始值和弹窗默认显示问题
  你当前placeToEdit的初始值设为0，且弹窗没有默认隐藏样式，页面刷新后弹窗会默认显示，拿到的ID就是不符合预期的初始值0，按以下逻辑修改即可：

1. 把placeToEdit初始值改为null
2. 在scss的.popup类中新增默认样式display: none;，或者直接给弹窗dom加行内样式style={{display: 'none'}}

• 去掉无效传参
  第96行的点击事件中不需要传入this，函数组件内this为undefined，直接修改为：

<input className="edit-place-button" value="Edytuj" onClick={() => editPlace(place._id)} type="submit" />

同步修改editPlace的参数定义：

const editPlace = (placeId) => {
  setPlaceToEdit(placeId);
  popupEl.current.style.display = 'block';
};

• 刷新页面保留编辑ID的方案
  如果需要页面刷新后仍然保留当前正在编辑的地点ID，可以把状态存在sessionStorage中，修改state初始化逻辑：

const [placeToEdit, setPlaceToEdit] = useState(() => {
  return sessionStorage.getItem('editingPlaceId') || null
});

更新状态时同步写入存储：

const editPlace = (placeId) => {
  setPlaceToEdit(placeId);
  sessionStorage.setItem('editingPlaceId', placeId)
  popupEl.current.style.display = 'block';
};

关闭弹窗时清空状态和存储：

<button type="submit" className="button-popup" onClick={() => { 
  popupEl.current.style.display = 'none';
  setPlaceToEdit(null);
  sessionStorage.removeItem('editingPlaceId')
}}>X</button>

• 关于挂载到文档下的方案说明
  你提到的将EditPlaceForm挂载到文档下的方案是React Portal，仅用来解决弹窗样式层级被父元素截断的问题，你的现有需求不需要用到该方案，修完上述问题后直接给EditPlaceForm传的placeToEdit参数就是正确的，直接在组件内根据ID去PlacesContext中匹配对应地点详情即可。

内容的提问来源于stack exchange，提问作者ciekawyziemniak