React模态框初始获取plate值为null的问题如何解决？

方案一：在模态框内部添加plate有效性校验 #

在BikeDataModal组件的请求逻辑里加个判断，只有当plate有有效内容时才发起后端请求，从根源避免空值请求。

示例代码（BikeDataModal内部）：

useEffect(() => {
  // 仅当plate不为空时执行请求
  if (plate.trim()) {
    // 这里写你的后端请求逻辑
    fetchBikeRelatedData(plate).then(res => {
      // 处理返回数据
    })
  }
}, [plate]);

方案二：父组件控制模态框的渲染时机 #

不要始终渲染BikeDataModal，只在模态框需要显示且plate已经有值的时候才渲染组件。这样模态框初始化时就能拿到正确的plate值，不会触发空值请求。

修改父组件的return部分：

return (
  <div className="text-center mt-5">
      <input type="text" defaultValue={plate} disabled className="me-3" />
      <button className="btn btn-outline-primary" onClick={openBikeDataModal}>
        Click Me
      </button>
      {/* 仅当模态框要显示且plate有值时才渲染 */}
      {bikeDataModal && plate.trim() && (
        <BikeDataModal
          show={bikeDataModal}
          close={closeBikeDataModal}
          plate={plate}
        />
      )}
  </div>
);

方案三：修改打开模态框的逻辑，确保plate已加载 #

如果希望用户点击按钮时，只有在plate加载完成后才打开模态框，可以在打开函数里加判断，避免在数据未就绪时打开模态框。

修改父组件的openBikeDataModal函数：

function openBikeDataModal() {
  // 如果plate还没加载完成，提示用户或重新发起请求
  if (!plate.trim()) {
    alert("数据加载中，请稍候再试");
    // 也可以在这里重新触发请求，拿到数据后再打开模态框
    getBudgetByIdRequest(pathname.id).then((response) => {
      setPlate(response.data.plate);
      setBikeDataModal(true);
    });
    return;
  }
  setBikeDataModal(true);
}

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