TypeError: Cannot read property 'number' of undefined

Question

我想使用 Axios 从我的列表中删除一本书。我使用我的数据库的 URL + id，但我找不到在 URL 中指定 id 的方法并且它保持未定义。

看起来像这样：

export default class ListBooks extends React.Component {
    constructor(props) {
        super(props);
        this.state = { error: null, data: [] }
    }
    componentDidMount() {
        Axios.get(process.env.REACT_APP_API_PATH_BOOKS)
            .then(res => {
                this.setState({ data: res.data });
            })
            .catch(errorThrown => {
                this.setState({ error: errorThrown });
            })
    }

    handleChange = event => {
        this.setState({ number: event.target.value });
    }

        /**
        * Use to delete a book by the id.
        */
        handleDelete = () => {
            const id = this.data.number
            console.log(id);
            Axios.delete(process.env.REACT_APP_API_PATH_BOOKS + id)
                .then(res => {
                     console.log(res);
                    console.log(res.data);
                    let cible = document.getElementById("book-admin" + id);
                    cible.remove();
                })
                .catch(errorThrown => {
                    this.setState({ error: errorThrown });
                })
        }

        render() {
            const { data } = this.state;

            return (
                <div>
                    <Container>
                        {data.map(books =>
                            <div key={books.number}>
                                <ListGroup>
                                    <ListGroup.Item disabled id={"book-admin" + data.number}>{books.name} {books.author}
                                    </ListGroup.Item>
                                </ListGroup>
                                <Button variant="outline-warning" size="sm" className="btn-admin-change" id={data.number} onClick={this.props.handleUpdate}>Modifier</Button>
                                <Button variant="outline-danger" size="sm" className="btn-admin-change" onClick={this.handleDelete}>Supprimer</Button>

                            </div>
                        )}
                    </Container>
                </div>
            )
        }
    }

每次我按下“删除”按钮时都会出现此错误：TypeError: Cannot read 属性 'number' of undefined.

有人可以告诉我我做错了什么吗？或者我需要什么才能获得所需的所有信息？谢谢

Answer 1

应该是：

const id = this.state.data.number

没有

const id = this.data.number

将来找到它的一个好技巧是始终从未定义的内容回溯以找到最后定义的内容并从那里开始工作

Answer 2

如果你从 state 得到号码，你应该做 this.state.number

现在在您的代码中，未定义的原因是：

1- this.setState({ error: errorThrown }) 正在覆盖 state 对象并删除数字字段

或

2- 您没有通过放置数字字段

来正确初始化状态对象

或

3- this.state.number尚未设置或已设置为另一个未定义的变量

最好的办法是在每次访问之前打印出来this.state。所以未定义错误之前的最后打印状态将告诉状态中存在的字段是什么。如果没有数字字段则错误是由 1 或 2 引起的如果有一个数字字段但它没有值（未定义）那么错误是由 3

Answer 3

构造函数中没有属性数据。在构造函数中添加数据状态。然后将 const id = this.data.number 替换为 const id = this.state.data.number

TypeError: Cannot read property 'number' of undefined

TypeError: Cannot read property 'number' of undefined

javascript

undefined

typeerror

reactjs

axios