Redux Form Component的值为“ undefined”，但会更新值，当值不是“ undefined”时，它不会更新

Question

我有一个页面，它接受文本并使用React，Redux Form和React Bootstrap提交到后端。

页面：

  <Form.Label className="text-muted">Social Media</Form.Label>
              <hr />
              <TextField
                type="text"
                label="Twitter"
                name="social_media.twitter"
                placeholder={"link to your twitter"}
                onChange={(e) => this.handleSocialMediaLinkChange(e, "twitter")}
                value={social_media && social_media.twitter}
              />
              <TextField
                type="text"
                label="Reddit"
                name="social_media.reddit"
                placeholder={"link to your reddit"}
                onChange={(e) => this.handleSocialMediaLinkChange(e, "reddit")}
                value={
                 social_media && social_media.reddit|| "NO VALUE"
                }
              />

TextField组件：

import React from "react";
import PropTypes from "prop-types";
import { Field as FormField } from "redux-form";
import { Form } from "react-bootstrap";
import "../../App.css";

const renderTextField = ({
  label,
  type,
  input,
  classes,
  disabled,
  onChange,
  placeholder,
  accept,
  id,
  meta: { touched, invalid, error },
  ...props
}) => {
    return (
      <Form.Group controlId="formBasicEmail">
        <Form.Label>{label}</Form.Label>
        <Form.Control
          type={type}
          {...input}
          className={classes}
          disabled={disabled}
          {...props}
          placeholder={placeholder}
          accept={accept}
        />
        {touched && invalid && <div className="signerror">{error}</div>}
      </Form.Group>
    );
};

const Field = (props) => (
  <FormField autoComplete={props.name} value={props.value} {...props} />
);

Field.propTypes = {
  classes: PropTypes.string,
  name: PropTypes.string.isRequired,
  label: PropTypes.string,
  type: PropTypes.string,
  disabled: PropTypes.any,
  value: PropTypes.any,
  id: PropTypes.string,
  onChange: PropTypes.func,
  placeholder: PropTypes.string,
  accept: PropTypes.any,
};

Field.defaultProps = {
  component: renderTextField,
};

export default Field;

这就是问题所在-在文本字段组件中-但我不确定为什么或发生了什么。

问题：

social_media.reddit && social_media.twitter的状态是twitter，具有有效值，并且reddit未定义。

页面加载后-在检查未定义值并返回其他内容时，它会正确显示"twitter.com"和"undefined" 但-没有变化。无论第一个值是什么，它将始终显示。它不会更新。

因此，在进行一些调试之后，我发现TextField中的value字段/ prop始终是“未定义的”。

请注意其如何丢失 renderTextField 组件中的value={value}字段。

我已将组件更改为此以添加值字段：

const renderTextField = ({
  label,
  type,
  input,
  classes,
  disabled,
  onChange,
  placeholder,
  value,
  accept,
  id,
  meta: { touched, invalid, error },
  ...props
}) => {
    return (
      <Form.Group controlId="formBasicEmail">
        <Form.Label>{label}</Form.Label>
        <Form.Control
          type={type}
          {...input}
          className={classes}
          disabled={disabled}
          {...props}
          placeholder={placeholder}
          accept={accept}
          value={value}
        />
        {touched && invalid && <div className="signerror">{error}</div>}
      </Form.Group>
    );
};

const Field = (props) => (
  <FormField autoComplete={props.name} value={props.value} {...props} />
);

Field.propTypes = {
  classes: PropTypes.string,
  name: PropTypes.string.isRequired,
  label: PropTypes.string,
  type: PropTypes.string,
  disabled: PropTypes.any,
  value: PropTypes.any,
  id: PropTypes.string,
  onChange: PropTypes.func,
  placeholder: PropTypes.string,
  accept: PropTypes.any,
};

Field.defaultProps = {
  component: renderTextField,
};

export default Field;

现在，该字段将永远不会更新任何值-在用户界面上仅保留空白。

那么这是怎么回事，我想念什么？

TL; DR-两种类型的问题。 value都不包含在renderTextField组件中，并且文本字段将仅显示一次值，并且除非用户输入新值，否则不会更新新值（如果未定义，则不能返回X）。

或者-将值prop添加到renderTextField，所有内容均为空白，并且无法显示任何值。