Question

这是代码块：

export function ViewHeaders(props){
    console.log(props.pitches)
    return (
        props.pitchKeys.map((pitchKey, index) => {
            console.log(pitchKey)
            //prints as expected
            return (
                <div>
                    <h1> {pitchKey} </h1>
                    <ViewPitches pitches={props.pitches} key={pitchKey}/>
                </div>
            )
        })
    )
};


function ViewPitches(props) {
    console.log(props.key)
    // printing as undefined
    return(
        props.pitches.map((pitch, index) => {
            if (pitch.pitchName == props.key) {
                return (<div>{pitch.id}</div>)    
            }
        })
    )
}

我正在迭代列表props.pitchKeys，并在ViewHeaders内按预期打印出每个pitchKey。

然后我将pitchKey作为道具传递给ViewPitches。

然而，当我打印出props.key时，它会以未定义的形式返回。将.map（）的返回值传递给props时，是否必须执行一些特殊操作？

Answer 1

key是一个“保留字”，因此它不会作为道具传递给您的组件，而是用于验证哪个项目已更改。更改道具的名称，它应该有效。

正如React docs所说：

键帮助React识别哪些项目已更改，已添加或已删除。应该给出数组内部元素的键，以赋予元素稳定的标识

React：映射列表并将值传递给另一个组件的props

1 个答案: