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

Question

我有一个从反应 useState 挂钩获取其状态的表单，该挂钩默认值我想来自 useTracker 调用，我在 Meteor 中使用 pub sub 来执行此操作。我收到一个错误 Cannot access '' before initialization 我知道这与 lead 尚未准备好并返回 undefined 和 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

如果您更改这两个挂钩的顺序，它应该会起作用，但最好将其分成两个部分，这样您就可以等到您的订阅准备就绪，然后再尝试使用 leads.email 作为默认值价值。不可能在挂钩之间分支（'return loading`），因为 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);

  ...
};

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

Cannot access ___ before initialization reactjs useState useTracker Subscriptions Form state meteor

meteor

reactjs

react-hooks