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

Posted 2023-02-19

【中文标题】Material-UI TextField 组件错误和 helperText 道具将我的状态视为未定义

【英文标题】：Material-UI TextField component error and helperText prop sees my state as undefined

【发布时间】：2022-01-19 16:41:11

【问题描述】：

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

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;

【参考方案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