ReactJS - map 內的 Map

Question

我正在開發 ReactJS 和 Redux 應用程序。 在某些時候，我有一個元素列表（注釋），每個元素都有一個數組（子任務）。 我想顯示所有元素，並為每個元素顯示其數組的內容。

我試過這個：

 render(){
    return(
        <div>
            <h3>{this.props.match.params.user}'s board</h3>

            <Link to={`/settings/${this.props.match.params.user}`}>
                <button>Settings</button>
            </Link>

            <Link to={`/new/${this.props.match.params.user}`}>
                <button>Add note</button>
            </Link>

            {
                this.props.notes.map((item,index) => 
                    <Link to={`/details/${item.name}`}>
                        <h4 key={index}>{item.name}</h4>

                        item.subtasks.map((sub, subindex)=>
                            <p key={subindex}>{sub}</p>)

                    </Link>
                )
            }
        </div>
    );
}

但我得到了：

未捕獲的 ReferenceError：未定義子索引

正確的方法是什么？

Answer 1

你需要像這樣在{}括號內包裝第二張map

{
    this.props.notes.map((item,index) => 
        <Link to={`/details/${item.name}`}>
            <h4 key={index}>{item.name}</h4>

            { 
                item.subtasks.map((sub, subindex) =>
                    <p key={subindex}>{sub}</p>)
            }

        </Link>
    )
}

Answer 2

以Vanilla JavaScript為例，您可以根據需要實現相同的反應方式。

 let users = [ { name: "Amoos", skills: ["PHP", "MySQL"] }, { name: "Rifat", skills: ["JavaScript", "React", "HTML"] } ]; users.map(( user, index ) => { console.log(`User: ${user.name}`) { user.skills.map(( skill, subIndex) => { console.log(`Skill # ${subIndex}: ${skill} `) }) } } )