无法在初始化之前访问__; reactjs useState useTracker订阅表单state meteor

我有一个表单，它从react-useState钩子中获取状态，钩子默认值，我希望来自useTracker调用，我正在Meteor中使用pub-sub来实现这一点。我在初始化之前遇到一个错误

无法访问“”

我知道这与潜在客户尚未准备好、返回未定义以及挂钩无法使用有关，至少我认为是这样。但我不知道如何解决这个问题

这是到目前为止我的代码

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;

import React，{useState}来自“React”；
从“/Dashboard”导入数据板；
从“./styles/Main”导入{Container}；
从“../../api/LeadsCollection”导入{LeadsCollection}”；
从“./leads/leadwarkin”导入{leadwarkin}；
从“流星/反应流星数据”导入{useTracker}；
常量Walkin=（{params}）=>{
const[email，setEmail]=useState（leads.email）；
常量handleSubmit=（e）=>{
e、 预防默认值（）；
如果（！电子邮件）返回；
Meteor.call（“leads.update”）、电子邮件、功能（错误、结果）{
控制台日志（结果）；
console.log（错误）；
});
setEmail（“”）；
};
const{leads，isLoading}=useTracker（（）=>{
const noDataAvailable={leads:[]}；
如果（！Meteor.user（））{
返回noDataAvailable；
}
const handler=Meteor.subscribe（“leads”）；
如果（！handler.ready（））{
返回{…noDataAvailable，isLoading:true}；
}
const leads=LeadsCollection.findOne（{u id:params.\u id}）；
返回{leads}；
});
控制台日志（leads）；
//控制台日志（参数id）；
常量deleteLead=（{u id}）=>{
Meteor.call（“leads.remove”，_id）；
window.location.pathname=`/walkin`；
};
返回(
在下面编辑一条线索
{孤岛加载(
加载。。。
) : (
setEmail（e.target.value）}
占位符=“键入以编辑潜在客户”
/>
编辑线索
)}
);
};
导出默认Walkin；

如果您更改这两个挂钩的顺序，它应该会起作用，但最好将其分为两个部分，以便您可以等到订阅就绪后再尝试使用

leads.email

作为默认值。不可能在钩子之间进行分支（“返回加载”），因为React不喜欢在组件中找到的钩子数量在重新渲染之间发生变化

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);

  ...
};

const Walkin=（{params}）=>{
const{leads，isLoading}=useTracker（（）=>{
const noDataAvailable={leads:[]}；
如果（！Meteor.user（））{
返回noDataAvailable；
}
const handler=Meteor.subscribe（“leads”）；
如果（！handler.ready（））{
返回{…noDataAvailable，isLoading:true}；
}
const leads=LeadsCollection.findOne（{u id:params.\u id}）；
返回{leads}；
});
如果（正在加载| |！导线）{
返回装载。。；
}否则{
返回；
}
};
常量子步=（{params，leads}）=>{
const[email，setEmail]=useState（leads.email）；
...
};