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