javascript - 通过循环渲染元素时在 React 中建立索引

Question

我最近几天正在学习ReactJS，并且遇到了通过循环渲染元素的特定问题。请阐明这个问题

当我们从提供的 PostList block 调用 removeItem 函数时，此脚本工作正常
在 PostList 功能 block 中，我们有

<Post key = {index} ..... removeItem = {() => props.removeItem(index)}/>

在Post功能 block 中我们有

<PostButton label = "x" handleClick = {props.removeItem}/>

但是如果我将此 removeItem 函数传递给 Post block 并调用该函数，如

在PostList功能 block 中，我们有

<Post key = {index} ..... removeItem = {props.removeItem}/> 

和
在Post功能 block 中我们有

<PostButton label = "x" handleClick = {() => props.removeItem(props.key)}/>    

Wrong Implemented Code然后，在删除项目时出现了一些错误，单击删除按钮的项目没有被删除，而是前一个项目被删除，这是不正确的。我认为原因是从 postList 变量中删除元素会影响第二种情况下的索引，但在第一种情况下通过再次重新渲染 postList 来正确处理。有人可以介绍一下在 React 中通过循环渲染元素时索引是如何工作的吗

function PostButton(props){
    var style = {
        width:24,
        height:24
    }
    return (
        <button style = {style} onClick = { () => props.handleClick()}>{props.label}</button>
    )
}
function PostText(props){
    var style = {
        border:"1px solid black",
        width: props.width
    }
    return (
        <div style = {style}>{props.text}</div>
    )
}
function Post(props){
    var style = {
        display:"flex"
    }
    return (
        <div style = {style}>
            <PostButton label = "x" handleClick = {props.removeItem}/>
            <PostText text = {props.title} width = "200"/>
            <PostButton label = "+" handleClick = {props.incrementScore}/>
            <PostText text = {props.score} width = "20"/>
            <PostButton label = "-" handleClick = {props.decrementScore}/>
        </div>
    )
}

function PostList(props){
    return (
        <ol>
        {
            props.postList.map((item,index) => 
                <Post key = {index} 
                      title = {item.title} 
                      score = {item.score}
                      incrementScore = {() => props.updateScore(index,1)}                         
                      decrementScore = {() => props.updateScore(index,-1)} 
                      removeItem = {() => props.removeItem(index)}
                />
             )
         }
        </ol>
    )  
}
class App extends React.Component{
    constructor(props){
        super(props)
        this.state = {value:"", items : []}
    } 
    handleChange(event){
        this.setState({value:event.target.value})
    }
    addItem(){

        var itemsCopy = this.state.items.slice()
        var truncatedString = this.state.value.substring(0,20);
        itemsCopy.push({"title":truncatedString,"score":0})
        itemsCopy.sort((a,b)=>{
          return b.score - a.score;
        })
        this.setState({items:itemsCopy,value:""})
    }
    removeItem(index){
        var itemsCopy = this.state.items.slice()
        itemsCopy.splice(index,1);
        itemsCopy.sort((a,b) => {
            return b.score - a.score
        })

        this.setState({items:itemsCopy})
    }
    updateScore(index,val){
        var itemsCopy = this.state.items.slice()
        itemsCopy[index].score += val
        itemsCopy.sort((a,b) => {
            return b.score - a.score
        })
        this.setState({items:itemsCopy})
    }
    render(){
        return (
            <div>
                <input value = {this.state.value} onChange = {this.handleChange.bind(this)}/>
                <button onClick = { () => this.addItem()}>Submit</button>
                <PostList postList = {this.state.items}
                          updateScore = {this.updateScore.bind(this)}  
                          removeItem = {this.removeItem.bind(this)}
                />

            </div>
        )
    }
}

ReactDOM.render(
    <App/>,
    document.getElementById("root")
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>
<div id="root"></div>

Answer 1

Key 不是 React 中的 prop。 key 是一个特殊的属性，它帮助 React 识别哪些项目已更改、添加或删除。 docs

如果你想在PostButton组件中使用这个索引，你应该单独传递它:

<Post key = {index} ..... id={index} removeItem = {() => props.removeItem(index)}/>

<PostButton label = "x" handleClick = {() => props.removeItem(props.id)}/>