开发者问题收集

React,尝试检查数组中是否存在某个值

2019-11-21
119

我在 React 状态下有一个数组 licenseKeys ,需要将用户输入到输入字段的所有新 lisenceKey 值推送到该数组。它可以工作,但是当我尝试检查新键的值是否存在于数组 this.state.licenseKeys.includes(this.state.licenseKey) 中时,我收到错误 Uncaught TypeError: Cannot read property 'includes' of undefined 。 我尝试改用带有 some 的箭头函数,但收到相同的错误 Uncaught TypeError: Cannot read property 'some' of undefined 。 我在这里做错了什么?

 if (localStorage.getItem("formData")) {
  this.state = JSON.parse(localStorage.getItem("formData"));
} else {
  this.state = {
    ppks: [],
    alert: false,
    ipState: "",
    portState: "",
    userNameState: "",
    passwordState: "",
    licenseKey: "",
    licenseKeys: [],
    licenseKeysObject: []
   // refreshButttonDisabled: true
}    
    }

 licenseKeysSetter = () => {
    if (this.state.licenseKey !== "" && this.state.licenseKeys.includes(this.state.licenseKey) === false){          
        this.setState({
            licenseKeys: [ ...this.state.licenseKeys || [], this.state.licenseKey]              
        }, () => {
            console.log(this.state.licenseKeys);            
        });
    }   
  }
.....
<ul>
      {ppkData.map((item, index) => {   
       if (item.model === "8l") {  
        return (
          <div className="ppkCard" key={index + 1}>

          <form>
          <div className="input-group input-group-sm mb-3">
          <div className="input-group-prepend">
            <span className="input-group-text" id="inputGroup-sizing-sm">Enter License Key</span>
          </div>
          <input type="text"
                 className="form-control"
                 placeholder="000-000-000-000-000-000" 
                 onChange={this.licenseKeysHandler}
                 value={this.state.licenseKey || ''} 
                 aria-label="Small" 
                 aria-describedby="inputGroup-sizing-sm" />
        </div>       
        <button type="button" onClick={this.licenseKeysSetter} >Save</button>     
        </form>
.........
 licenseKeysHandler = (event) => {      
    this.setState({licenseKey: event.target.value}, () => {
        console.log(this.state.licenseKey);
    })      
  }
2个回答

如果 localStorage 不包含状态中所需的所有键(例如在新版本发布后),您可以像这样将初始状态与加载 localStorage 分开:

class MyComponent() {
  state = {
    ppks: [],
    alert: false,
    ipState: "",
    portState: "",
    userNameState: "",
    passwordState: "",
    licenseKey: "",
    licenseKeys: [],
    licenseKeysObject: []
  }  
  componentDidMount() {
    this.setState(JSON.parse(localStorage.getItem("formData")))   
  }
  ...
}
Aprillion
2019-11-21

我修改了这样的代码,它对我来说工作正常...

 licenseKeysSetter = () => {
    //console.log(this.state.licenseKey);
    console.log(this.state.licenseKeys);
    //console.log(this.state);
    if (this.state.licenseKeys === undefined) {
        if (this.state.licenseKey !== "" ){         
        this.setState({
            licenseKeys: [ ...this.state.licenseKeys || [], this.state.licenseKey]              
        }, () => {
            console.log(this.state.licenseKeys);            
        });
    } 
  } else {      
    if (this.state.licenseKey !== "" && !this.state.licenseKeys.includes(this.state.licenseKey)){            
        //console.log(this.state.licenseKeys);
        this.setState({
            licenseKeys: [ ...this.state.licenseKeys || [], this.state.licenseKey]              
        }, () => {
            console.log(this.state.licenseKeys);            
        });
    }  
    }   
  }
Yurii
2019-11-21