Material-UI TextField 组件错误和 helperText 道具将我的状态视为未定义

Question

我正在尝试借助我在 TextField 组件上的状态进行验证，但是无论我想从我的状态传递给错误还是 helperText 道具，它都将其视为未定义，即使示例 console.log of state after in render 可以看到那个状态。它还可以查看我是否传递给错误道具，例如：

error={parcelNumberInput.errorText.length > 0}

我收到一条错误消息，提示它无法读取“null”的长度属性所以这是它可以看到那个状态的证据？因此，如果我像您在下面的代码中看到的那样这样做，我会收到此错误：

import PropTypes from "prop-types";
import TextField from "material-ui/TextField";

const POST_CODE_MAX_LENGTH = 5;
const PARCEL_NUM_MAX_LENGTH = 14;

class CashReceiptForm extends Component {
  state = {
    parcel: { parcelNumber: "", postCode: "" },
    submitButton: { isDisabled: false, isLoading: false },
    inputValidation: {
      parcelNumberInput: { errorText: null, error: false },
      postCodeInput: { errorText: null, error: false }
    }
  };

  handleChange = (event) => {
    const { name, value } = event.target;

    console.log("value", value);
    console.log("name", name);

    if (!isNaN(value)) {
      this.setState({
        parcel: {
          ...this.state.parcel,
          [name]: value
        }
      });
    } else {
      if (name === "parcelNumber") {
        this.setState({
          inputValidation: {
            parcelNumberInput: {
              errorText: "Musia byť čísla"
            }
          }
        });
      } else {
        this.setState({
          inputValidation: {
            postCodeInput: {
              errorText: "Musia byť čísla"
            }
          }
        });
      }
    }
  };

  handleSubmit = () => {
    console.log("this.state", this.state);
  };

  render() {
    const { parcelNumber, postCode } = this.state.parcel;
    const { parcelNumberInput, postCodeInput } = this.state.inputValidation;

    return (
      <div>
        <div>
          <div className="page-header page-header-top-margin-none">
            <h2 className="page-title">
              Elektronický Príjmový Pokladničný Doklad
            </h2>
          </div>
          <div className="box box-small">
            <div>
              <div className="form-group">
                <div className="form-control">
                  <TextField
                    autoFocus
                    helperText={parcelNumberInput.errorText}
                    inputProps={{ maxLength: PARCEL_NUM_MAX_LENGTH }}
                    error={parcelNumberInput.errorText !== null}
                    id="parcel-number"
                    label="Číslo zásielky"
                    name="parcelNumber"
                    type="text"
                    value={parcelNumber}
                    onChange={this.handleChange}
                    fullWidth
                    margin="normal"
                  />
                  <TextField
                    helperText={postCodeInput.errorText}
                    inputProps={{ maxLength: POST_CODE_MAX_LENGTH }}
                    error={postCodeInput.errorText !== null}
                    id="post-code"
                    label="PSČ"
                    name="postCode"
                    type="text"
                    value={postCode}
                    onChange={this.handleChange}
                    fullWidth
                    margin="normal"
                  />
                </div>
              </div>

              <div className="button-group">
                <button onClick={() => this.handleSubmit()}>Submit</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

CashReceiptForm.propTypes = {
  parcelNumber: PropTypes.number,
  postCode: PropTypes.number
};

export default CashReceiptForm;

Answer 1

当您使用新的 inputValidation 错误设置状态时，您将完全覆盖 this.state.inputValidation 的现有值（有效地删除它们）。

要在更新时保留之前的状态值this.state.inputValidation，您需要将它们重新添加到对象中，例如，通过将它们散布回对象中：

      if (name === "parcelNumber") {
        this.setState({
          inputValidation: {
            ...this.state.inputValidation, /** Here **/
            parcelNumberInput: {
              errorText: "Musia byť čísla"
            },
          }
        });
      } else {
        this.setState({
          inputValidation: {
            ...this.state.inputValidation, /** And here **/
            postCodeInput: {
              errorText: "Musia byť čísla"
            }
          }
        });
      }

工作示例：https://codesandbox.io/s/material-demo-forked-ludpo?file=/CashReceiptForm.js

Material-UI TextField 组件错误和 helperText 道具将我的状态视为未定义

Material-UI TextField component error and helperText prop sees my state as undefined

state

textfield

reactjs