未能“removeChild"在动态更新数组的同时做出反应 [英] failed to "removeChild" coming in react while dynamically updating an array

问题描述

我的 React 组件状态中有一个数组personArray".我在组件中有一个搜索栏.根据我在搜索栏中输入的内容，我向 api 发出请求并更新personArray"的状态.我在渲染方法中映射了这个personArray".(见下面的代码)

问题:当我在搜索栏中输入第一个字母时，人员列表会更新并正确反映在渲染中.当我输入第二个字母时，我收到此错误提示

未捕获的 DOMException:无法在节点"上执行removeChild":要删除的节点不是该节点的子节点.

代码:

这是我的搜索栏

{this.searchForPerson()}}>

这是 searchForPerson 函数(这里我搜索并更新我的状态)

searchForPerson(){var that = this让 req = fetch(url,{方法:获取"，标题:{"授权": "令牌" + this.props.token_reducer.token,内容类型":应用程序/json"}})req.then(response => response.json()).那么(响应=> {console.log("输入")控制台日志(响应)that.setState({ personArray: response.results }, () => {//new SimpleBar(document.getElementById('items-listing'))console.log(this.state.personArray)})})}

这是我映射personArray"的地方

{this.state.personArray &&this.state.personArray.map((item, i) => { return<div className={`item ${this.state.activePersonRow===i?"active" : ""}`} key={i} onClick={()=>{ this.onPersonRowClick(i, item.name, item.id) }}><div className="item-img" style={{backgroundImage:`url(${item.personframes.length !==0 ? item.personframes[0].file : ""})`}}><;/div><div className="item-title">{item.name}<br/><div className="item-sub">{item.occupation}</div>
<div className="item-count">{item.personframes.length}</div>

})}

更新:我观察到了一些东西.当 api 返回等于或超过 10 个项目数组时，它就起作用了.一旦 api 返回一个少于 10 个项目的数组，就会出现错误.不知道为什么，但情况就是这样.——

解决方案

在 .map 中使用数组索引作为键被认为是一种反模式，它在文档 https://reactjs.org/docs/lists-and-keys.html.Reacts 使用键来了解什么是什么节点，什么时候节点的顺序和数量发生变化而索引保持不变 React 可能很难弄清楚什么是什么.尝试使用一些对您的人来说独一无二的数据.也许您的数据库中有 ID，这样就可以了.

I am having an array "personArray" in the state of my react component. I have a search bar in the component. Based on what I type in search bar, I make a request to an api and update the state of "personArray". I mapping this "personArray" in my render method. (see code below)

Problem: When I type the first letter in the search bar, the list of people gets updated and reflects in render properly. When as soon as I type the second letter, I get this error saying

Uncaught DOMException: Failed to execute 'removeChild' on 'Node':
 The node to be removed is not a child of this node.

Code:

THis is my search bar

<input type="text" className="input-hidden" placeholder="search" ref="personSearch" id="personSearch" onChange={()=>{this.searchForPerson()}}>

This is the searchForPerson function (here I search and update my state)

searchForPerson(){

    var that = this

    let req = fetch(url,
        {
            method: "GET",
            headers: {
                "Authorization": "Token " + this.props.token_reducer.token,
                "content-type": "application/json"
            }
        })
    req.then(response => response.json()
    ).then(response => {
        console.log("type it")
        console.log(response)
        that.setState({ personArray: response.results }, () => {
            //new SimpleBar(document.getElementById('items-listing'))
            console.log(this.state.personArray)
        })
    })
}

This is my where I map "personArray"

<div className="items-listing" id="items-listing">
    {this.state.personArray && this.state.personArray.map((item, i) => { return
    <div className={`item ${this.state.activePersonRow===i
        ? "active" : ""}`} key={i} onClick={()=> { this.onPersonRowClick(i, item.name, item.id) }}>
        <div className="item-img" style={{backgroundImage:`url(${item.personframes.length !==0 ? item.personframes[0].file : ""})`}}></div>
        <div className="item-title">{item.name}
            <br/>
            <div className="item-sub">{item.occupation}</div>
        </div>
        <div className="item-count">{item.personframes.length}</div>
    </div>
    })}
</div>

UPDATE: I observed something. When the api returns equal to or more than 10 items array then it works. As soon as api return an array with less than 10 items then the error comes. No idea why but this is the case. –

解决方案

Using array index as key in .map is considered an antipattern, it is in the docs https://reactjs.org/docs/lists-and-keys.html. Reacts uses keys to understand what node is what and when order and amount of nodes change and indexes remain the same React might have hard time figuring out what is what. Try using some data that is unique for your persons. Maybe you have ID's in your database, that will do just fine.

这篇关于未能“removeChild"在动态更新数组的同时做出反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！