Question

大家好，这是我第一次使用react钩子，我通过使用react钩子构建了一个多步骤antd，这样我就可以将所有值传递到最后一步，并将其提交给firebase。但是，在尝试获取当前步骤的状态时，出现提示无法读取未定义的属性“状态”的问题。我不知道我在做什么错，所以我们将不胜感激。谢谢！

import PropTypes from "prop-types";
import classNames from "classnames";
import { Menu, Icon, Button, Popover, Badge } from "antd";
import Header from "./Header";
import First from "./First";
import React, { Component } from "react";
import { useState } from "react";
import "antd/dist/antd.css";
import { useForm, useStep } from "react-hooks-helper";
import firebase from "./Firebase";
import {
  Form,
  Input,
  Tooltip,
  Cascader,
  Tag,
  Select,
  Row,
  Col,
  Option,
  InputNumber,
  Checkbox,
  AutoComplete,
} from "antd";
import Second from "./Second";
import Third from "./Third";
import { QuestionCircleOutlined } from "@ant-design/icons";

import { Steps, message } from "antd";

const Step = Steps.Step;
const defaultData = {
  firstName: "",
  lastName: "Doe",
  address: "",
  city: "",
  state: "CA",
  zip: "",
  lat: "",
  long: "",
  email: "",
  phone: "",
  supply: [],
};

const steps = [
  {
    title: "",
    content: <First />,
  },
  {
    title: "",
    content: <Second />,
  },
  {
    title: "",
    content: <Third />,
  },
];

const Help = ({ images }) => {
  const AutoCompleteOption = AutoComplete.Option;
  const [formData, setForm] = useForm(defaultData);
  const { step, navigation } = useStep({ initialStep: 0, steps });
  const { id } = step;

  const props = { formData, setForm, navigation };

  const [current, setCount] = useState(0);

  console.log(current);
  return (
    <div>
      <Header />
      <br />
      <Steps current={current}>
        {steps.map((item) => (
          <Step key={item.title} title={item.title} />
        ))}
      </Steps>
      <div className="steps-content">{steps[current].content}</div>
      <div className="steps-action">
        //this is where i get error {current < steps.length - 1 && (
          <Button type="primary" onClick={() => setCount(current + 1)}>
            Next
          </Button>
        )}
        {current === steps.length - 1 && (
          <Button
            type="primary"
            onClick={() => message.success("Processing complete!")}
          >
            Done
          </Button>
        )}
        {this.state.current > 0 && (
          <Button
            style={{ marginLeft: 8 }}
            onClick={() => setCount(current - 1)}
          >
            Previous
          </Button>
        )}
      </div>
    </div>
  );
};

export default Help;

Answer 1

您正在使用this.state.current，这是访问类组件内状态的方法。在这里，您可以使用current直接访问自己的州。

无法读取未定义反应挂钩的属性“状态”

1 个答案: