facebook / react

The library for web and native user interfaces.
https://react.dev
MIT License
228.44k stars 46.74k forks source link

[DevTools Bug] Could not inspect element with id 5 #21632

Closed xiaodongxing closed 3 years ago

xiaodongxing commented 3 years ago

Website or app

react create app example

Repro steps

1、"react": "^17.0.2","react-dom": "^17.0.2" 2、code example import React, { Component, Fragment } from 'react'

class TodoList extends Component { constructor(props) { super(props) this.state = { value: '', list: [] } } handleClickBtn = () => { this.setState({ value: '', list: [...this.state.list, this.state.value] }) } handleDel = (idx) => { const list = this.state.list.slice(0) list.splice(idx, 1)

    this.setState({
        list
    })
}
handleInput(e) {
    this.setState({
        value: e.target.value
    })
}
render() {
    return (
        <Fragment>
            <input
                value={this.state.value}
                type="text"
                onChange={this.handleInput.bind(this)}
            />
            <button onClick={this.handleClickBtn}>按钮</button>
            <ul>
                {this.state.list.map((v, idx) => {
                    return (
                        <li key={v}>
                            {v}
                            <button onClick={() => this.handleDel(idx)}>
                                删除
                            </button>
                        </li>
                    )
                })}
            </ul>
        </Fragment>
    )
}

}

export default TodoList

How often does this bug happen?

Every time

DevTools package (automated)

react-devtools-extensions

DevTools version (automated)

4.13.5-0ae5290b54

Error message (automated)

Could not inspect element with id 5

Error call stack (automated)

Report this issue
(Please include steps on how to reproduce it and the components used.)
Uncaught Error: Could not inspect element with id 5
Dismiss
The error occurred at InspectedElementContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:31392:3)
    at Suspense
    at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30033:5)
    at div
    at InspectedElementErrorBoundaryWrapper (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30176:3)
    at NativeStyleContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32661:3)
    at div
    at div
    at OwnersListContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:28268:3)
    at SettingsModalContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:28709:3)
    at Components_Components (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:34512:52)
    at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30033:5)
    at PortaledContent (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30147:5)
    at div
    at div
    at ProfilerContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:34138:3)
    at TreeContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:24945:3)
    at SettingsContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:25548:3)
    at ModalDialogContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30234:3)
    at DevTools_DevTools (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37241:3)

Error component stack (automated)

at InspectedElementContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:31392:3)
    at Suspense
    at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30033:5)
    at div
    at InspectedElementErrorBoundaryWrapper (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30176:3)
    at NativeStyleContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32661:3)
    at div
    at div
    at OwnersListContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:28268:3)
    at SettingsModalContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:28709:3)
    at Components_Components (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:34512:52)
    at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30033:5)
    at PortaledContent (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30147:5)
    at div
    at div
    at ProfilerContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:34138:3)
    at TreeContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:24945:3)
    at SettingsContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:25548:3)
    at ModalDialogContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30234:3)
    at DevTools_DevTools (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37241:3)

GitHub query string (automated)

https://api.github.com/search/issues?q=Could not inspect element with id 5 in:title is:issue is:open is:public label:"Component: Developer Tools" repo:facebook/react
zachbryant commented 3 years ago

Why was this closed? What was the resolution?