React.js - 更新时唯一的“Key”道具

Question

当我加载我的页面时，一切都很好。 添加新节目时，会出现错误。 每个都有一个关键，我搜索了所有的问题和博客，但无法正确解决！

显示显示.js

 import styles from "./ShowsDisplay.module.css"; function ShowsDisplay ({shows, deleteShow}) { if (shows.length === 0) { return ( <div key={"nenhumshow"}> <p>Nenhum show listado</p> </div> ); } return ( <div key={"showsencontrados"}> {shows.map((show) => { return ( <div key={show.id} className={styles.showsDisplay}> <p className={styles.showsTitles}> {show.title}</p> <button className={styles.deleteButton} type="button" onClick={ () => deleteShow(show) }>Delete</button> </div> ); })} </div> ); } export default ShowsDisplay;

Answer 1

尝试使每个子元素的键尽可能唯一。 Key 是告诉 React DOM 哪个子元素被更新/删除/添加的属性。

{shows.map((show,index) => {
                return (
                    <div key={show.id+" "+ index} className={styles.showsDisplay}>
                        <p className={styles.showsTitles}> {show.title}</p>
                        <button className={styles.deleteButton} type="button" onClick={ () => deleteShow(show) }>Delete</button>
                    </div>
                );
            })}

Answer 2

它一定是关于新节目的，可能是新节目的 id 未定义，所以你得到了那个错误

如果你的 id 不是连续的数字，试试这个

{shows.map((show,index) => {
                return (
                    <div key={show.id??index} className={styles.showsDisplay}>
                        <p className={styles.showsTitles}> {show.title}</p>
                        <button className={styles.deleteButton} type="button" onClick={ () => deleteShow(show) }>Delete</button>
                    </div>
                );
            })}

或者只是这个''