带有reacjs的模态得到空值

Question

我有这样的父母：

function ViewBudgetPage() {
  const pathname = useParams();
  const [plate, setPlate] = useState("");
  const [bikeDataModal, setBikeDataModal] = useState(false);

  useEffect(() => {
    getBudgetByIdRequest(pathname.id).then((response) => {
      setPlate(response.data.plate);
    });
  }, [pathname.id]);

  function openBikeDataModal() {
    setBikeDataModal(true);
  }

  function closeBikeDataModal() {
    setBikeDataModal(false);
  }

  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>
      <BikeDataModal
        show={bikeDataModal}
        close={closeBikeDataModal}
        plate={plate}
      />
    </div>
  );
}
export default ViewBudgetPage;

我在useEffect中获取车牌数据并将其设置为值。
车牌值正在传递给模态。
该模式仅在单击时打开。
在模态类中，我有另一个 useEffect，它在后端请求中使用车牌值。
第一次渲染时，车牌值为空，并且我从后端收到错误，之后我得到了正确的值。
如何使我的模态获得正确的板值？

Answer 1

我假设您正在调用

GET /listBikeByPlate

组件中的

BikeDataModal

端点。

如果是这种情况，问题在于当

BikeDataModal

仍然是

plate

/

undefined

时，您正在渲染

null

，因此调用

GET /listBikeByPlate

时查询参数

plate

没有任何值（根据屏幕截图中的

?plate=

）

因此，您能做的最好的事情就是避免渲染子组件，直到

useEffect

中的初始请求完成。

我的建议是像这样添加一个新状态

const [isLoaded, setIsLoaded] = useState(false)

然后在您的

getBudgetByIdRequest

内部，一旦获取解析/完成，将

setIsFetching

设置为

true

，就像这样

  useEffect(() => {
    getBudgetByIdRequest(pathname.id).then((response) => {
      setPlate(response.data.plate);
      setIsLoaded(true)
    });
  }, [pathname.id]);

最后在原始

return

块之前进行条件渲染

if (!isLoaded) {
  return <>Loading</>
}

因此，在获取完成并且您的

plate

已设置后，您的

BikeDataModal

现在将拥有正确的

plate

数据，从而进行正确的 API 调用。