Estoy usando reaccionar para crear una aplicación. Usé create-react-app para configurar el proyecto. El siguiente código se utilizó para representar el contenido.

 renderVideoShowBlock = () => { if (this.state.videoRecords) { return this.state.videoRecords.map((record) => { console.log("renderVideoShowBlock called", record.id) return ( <VideoShowBlock user={this.state.user} key={record.id} record={record} onItemDelete={() => {this.handleVideoItemDelete(record.id)}} /> ) }) } }

la función this.handleVideoItemDelete hará una solicitud de publicación de axios a "video/". Encuentro que cuando se llama a este onItemDelete en los módulos internos, el registro de cierre siempre apunta al último registro en this.state.videoRecords . Utilizo el siguiente código para rastrear lo que sucedió:

 render() { const videoJsOptions = this.videoJsOptions const contentBlock = ( <div className='video-box col-lg-6 col-md-8 col-sm-10 col-12 offset-lg-3 offset-md-2 offset-sm-1' > <VideoPlayer {...videoJsOptions} /> </div> ) console.log("VideoShowBlock render called") this.props.onItemDelete() return ( <ShowBlock user={this.props.user} author={this.props.record.author} content={contentBlock} onItemDelete={this.props.onItemDelete} /> ) }

Podemos ver eso

 console.log("VideoShowBlock render called") this.props.onItemDelete()

fue llamado en consecuencia. En la consola de Chrome, encontramos: console.log se llamó 3 veces, pero en la pestaña de red, encontramos que this.props.onItemDelete se llamó 6 veces , el onItemDelete de cada registro de video se llamó dos veces.

Si comento this.props.onItemDelete , no se enviará ninguna solicitud, lo que significa que no puedo ver ninguna solicitud en la pestaña de red. Parece que la función fue llamada dos veces. ¿Porqué es eso?