从外部文件引入Redux-Form组件导致页面加载冻结求助

嘿，我一眼就揪出问题啦！你遇到的页面无限加载冻结，核心原因就是循环引用，咱们马上来修复：

问题根源 #

在你的SurveyForm.js文件里，导入语句写错了：

import SurveyField from "./SurveyForm"; // 这里错把组件自己当成SurveyField导入了！

这就形成了循环引用——SurveyForm组件试图导入它自己，浏览器会陷入无限解析的死循环，直接导致页面卡死。

修复步骤 #

1. 修正导入路径
   把SurveyForm.js里的导入语句改成正确的路径，指向真正的SurveyField组件：

   import SurveyField from "./SurveyField";
   

2. （可选）优化自定义组件适配Redux-Form
   Redux-Form的Field组件会自动传递input、meta等props给自定义组件，你可以把这些props传递给input，让组件功能更完整：

   // SurveyField.js
   import React from "react";
   const SurveyField = ({ input, label }) => {
     return <input {...input} placeholder={label} />;
   };
   export default SurveyField;
   

   之后在SurveyForm里使用时，还可以添加label属性：

   <Field type="text" name="title" component={SurveyField} label="Survey Title" />
   

修正后的完整SurveyForm.js代码 #

import React, { Component } from "react";
import { reduxForm, Field } from "redux-form";
import SurveyField from "./SurveyField"; // 这里已经修正了路径

class SurveyForm extends Component {
  render() {
    return (
      <div>
        <form onSubmit={this.props.handleSubmit(values => console.log(values))}>
          <Field type="text" name="title" component={SurveyField} />
          <button type="submit">Submit</button>
        </form>
      </div>
    );
  }
}

export default reduxForm({ form: "surveyForm" })(SurveyForm);

这样修改后，循环引用被打破，组件就能正常渲染，不会再出现页面冻结的情况啦！

内容的提问来源于stack exchange，提问作者user9763166