即使在文本字段中有值后也显示值为空

Question

我有一个从服务器获取数据并显示在文本字段中的表单。尽管数据在文本字段中，但当我单击保存按钮时，显示以下字段的所有字段都出现错误，不能为空。此外，当我尝试更改值时，我无法输入任何文本，也无法擦除文本。为什么那边有值的时候值显示为空？

const mapStateToProps = createStructuredSelector({
  cloudinaryData: selectCloudinary()
});

class Cloudinary extends React.Component {
  state = {
    cloudinary: {
      cloudinary_cloud_name: "",
      cloudinary_api_key: "",
    },
    errors: {}
  };

  componentDidMount() {
    this.props.loadCloudinary();
  }

  handleChange = event => {
    const fieldName = event.target.name;
    this.setState(
      {
        cloudinary: {
          ...this.state.cloudinary,
          [event.target.name]: event.target.value
        }
      },
      () => {
        this.validateField([fieldName]);
      }
    );
  };


  handleSubmit = event => {
    event.preventDefault();
    this.props.requestCloudinary(this.state.cloudinary);
  };

  render() {
    const { cloudinary, errors } = this.state;
    const { cloudinaryData } = this.props;
    if (cloudinaryData.size === 0) {
      return <div>Fetching Data...</div>;
    }
    return (
      <form onSubmit={this.handleSubmit}>
        <TextFieldGroup
          name="cloudinary_cloud_name"
          type="text"
          value={
            cloudinaryData
              ? cloudinaryData.cloudinary_cloud_name
              : cloudinary.cloudinary_cloud_name
          }
          onChange={this.handleChange}
          onBlur={this.handleBlur}
          error={errors.cloudinary_cloud_name}
        />
        <button className="btn btn-primary">Save changes</button>
      </form>
    );
  }
}

Answer 1

这是因为您在这里将值设置为 props 而不是您的状态：

<TextFieldGroup
  name="cloudinary_cloud_name"
  type="text"
  value={
    cloudinaryData
      ? cloudinaryData.cloudinary_cloud_name
      : cloudinary.cloudinary_cloud_name
  }
  onChange={this.handleChange}
  onBlur={this.handleBlur}
  error={errors.cloudinary_cloud_name}
/>

相反，创建一个构造函数并将您的状态初始化为您的道具，并替换您的值以使用状态：

const mapStateToProps = createStructuredSelector({
  cloudinaryData: selectCloudinary()
});

class Cloudinary extends React.Component {

  constructor(props){
      super(props);
      state = {
          cloudinary: {
            cloudinary_cloud_name: props.cloudinaryData.cloudinary_cloud_name,
            cloudinary_api_key: props.cloudinaryData.cloudinary_api_key,
       },
       errors: {}
     }
  }

  componentDidMount() {
    this.props.loadCloudinary();
  }

  handleChange = event => {
    const fieldName = event.target.name;
    this.setState(
      {
        cloudinary: {
          ...this.state.cloudinary,
          [event.target.name]: event.target.value
        }
      },
      () => {
        this.validateField([fieldName]);
      }
    );
  };


  handleSubmit = event => {
    event.preventDefault();
    this.props.requestCloudinary(this.state.cloudinary);
  };

  render() {
    const { cloudinary, errors } = this.state;
    const { cloudinaryData } = this.props;
    if (cloudinaryData.size === 0) {
      return <div>Fetching Data...</div>;
    }
    return (
      <form onSubmit={this.handleSubmit}>
        <TextFieldGroup
          name="cloudinary_cloud_name"
          type="text"
          value={cloudinary.cloudinary_cloud_name}
          onChange={this.handleChange}
          onBlur={this.handleBlur}
          error={errors.cloudinary_cloud_name}
        />
        <button className="btn btn-primary">Save changes</button>
      </form>
    );
  }
}