reactjs - 初始化reactjs useState useTracker Subscriptions Form state meteor 之前无法访问___

Question

我有一个表单，它从一个 react useState 钩子(Hook)中获取它的状态，它钩子(Hook)我想来自一个 useTracker 调用的默认值，我在 Meteor 中使用 pub sub 来做到这一点。我收到一个错误 Cannot access '' before initialization我知道这与铅尚未准备好并返回未定义以及钩子(Hook)无法使用它有关，至少我认为是这样。但我不知道如何解决这个问题。
到目前为止，这是我的代码

import React, { useState } from "react";
import Dasboard from "./Dashboard";
import { Container } from "../styles/Main";
import { LeadsCollection } from "../../api/LeadsCollection";
import { LeadWalkin } from "../leads/LeadWalkin";
import { useTracker } from "meteor/react-meteor-data";

const Walkin = ({ params }) => {
  const [email, setEmail] = useState(leads.email);

  const handleSubmit = (e) => {
    e.preventDefault();

    if (!email) return;

    Meteor.call("leads.update", email, function (error, result) {
      console.log(result);
      console.log(error);
    });

    setEmail("");
  };

  const { leads, isLoading } = useTracker(() => {
    const noDataAvailable = { leads: [] };

    if (!Meteor.user()) {
      return noDataAvailable;
    }

    const handler = Meteor.subscribe("leads");

    if (!handler.ready()) {
      return { ...noDataAvailable, isLoading: true };
    }

    const leads = LeadsCollection.findOne({ _id: params._id });
    return { leads };
  });

  console.log(leads);

  //console.log(params._id);

  const deleteLead = ({ _id }) => {
    Meteor.call("leads.remove", _id);
    window.location.pathname = `/walkin`;
  };
  return (
    <Container>
      <Dasboard />
      <main className="split">
        <div>
          <h1>Edit a lead below</h1>
        </div>
        {isLoading ? (
          <div className="loading">loading...</div>
        ) : (
          <>
            <LeadWalkin
              key={params._id}
              lead={leads}
              onDeleteClick={deleteLead}
            />
            <form className="lead-form" onSubmit={handleSubmit}>
              <input
                type="text"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="Type to edit lead"
              />

              <button type="submit">Edit Lead</button>
            </form>
          </>
        )}
      </main>
    </Container>
  );
};

export default Walkin;

Answer 1

如果您更改这两个钩子(Hook)的顺序，它应该可以工作，但最好将其分成两个组件，以便您可以等到订阅准备好后再尝试使用 leads.email作为默认值。不可能在钩子(Hook)之间进行分支(“返回加载”)，因为 React 不喜欢它在组件中找到的钩子(Hook)数量在重新渲染之间发生变化时。

const Walkin = ({ params }) => {
  const { leads, isLoading } = useTracker(() => {
    const noDataAvailable = { leads: [] };

    if (!Meteor.user()) {
      return noDataAvailable;
    }

    const handler = Meteor.subscribe("leads");

    if (!handler.ready()) {
      return { ...noDataAvailable, isLoading: true };
    }

    const leads = LeadsCollection.findOne({ _id: params._id });
    return { leads };
  });

  if (isLoading || !leads) {
    return <div>loading..</div>;
  } else {
    return <SubWalkin params=params leads=leads />;
  }
};

const SubWalkin = ({ params, leads }) => {
  const [email, setEmail] = useState(leads.email);

  ...
};