Я почти уверен, что код верен, но я все еще получаю сообщение об ошибке "TypeError: this.setState.myItems не определено", когда я нажимаю кнопку удаления, я пытался удалить конкретный элемент, используя метод setState в filter ().ошибка в строке 35: const FilterItems = this.setState.myItems.filter (myItem => {
там
import React from "react";
import PropTypes from "prop-types";
import { returnStatement, isTemplateElement } from "@babel/types";
import "./style.css";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
myItems: ["Poco F1", "OnePlus 6", "MiA1", "S7 Edge"]
};
}
addItem(e) {
e.preventDefault();
const { myItems } = this.state;
const newItem = this.newItem.value;
const exists = myItems.includes(newItem);
if (exists) {
this.setState({
message: "This Phone is already listed"
});
} else {
newItem !== "" &&
this.setState({
myItems: [...this.state.myItems, newItem]
});
}
this.newForm.reset();
}
removeItem(item) {
const filteredItems = this.setState.myItems.filter(myItem => {
return myItem !== item;
});
this.setState({
myItems: [...filteredItems]
});
}
render() {
const { myItems, message } = this.state;
return (
<div>
<h1>
<b>PHONE LIST</b>
</h1>
<form
ref={input => (this.newForm = input)}
onSubmit={e => this.addItem(e)}
>
<div className="form-group">
<label className="sr-only" htmlFor="newItemInput">
{" "}
ADD NEW PHONE
</label>
<input
type="text"
ref={input => (this.newItem = input)}
placeholder="Enter Phone Name"
className="form-control"
id="newItemInput"
/>
</div>
<button type="submit">ADD</button>
</form>
<div className="content">
<table className="table">
<thead>
<tr>
<th>Number</th>
<th>Phone Name</th>
<th>add/remove</th>
</tr>
</thead>
<tbody>
{myItems.map(item => {
return (
<tr key={item}>
<td scope="row">1</td>
<td>{item}</td>
<td>
<button
onClick={e => this.removeItem(item)}
type="button"
>
REMOVE
</button>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
<ol />
</div>
);
}
}
export default App;
Я хочу удалить определенный элемент с помощью setState вметод filter ()