javascript - React List 组件不会重新渲染新列表

Question

我正在开发 Spotify 克隆，目前正在研究搜索功能。我已经设置了向 Spotify API 发送请求，然后返回随该搜索结果弹出的艺术家、轨道和专辑列表的方法，因此我想将列表呈现为迷你组件，并使列表重新呈现当您更改搜索结果并获得具有不同结果的新回调时。

<ArtistList items={this.state.artists} />

class ArtistList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: []
        }
    }
    componentDidMount() {
        this.setState({
            list: this.props.items
        });
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            list: nextProps.items
        });
    }
    render() {
        return (
            <div>
                <ul>
                    {this.state.list.map(item => (
                        <MiniArtist data={item}/>))}
                </ul>
            </div>
            );
    }
}

这是我为列表编写的代码，其中新项目将作为搜索栏的 Prop 传入，然后更改状态，但这不会更改我在之后创建的 MiniArtist 组件中显示的内容第一个回调。有没有办法解决这个问题，使其随着搜索的变化而动态变化，就像在某些当前的应用程序中一样，或者性能是否太明智，我应该创建一个单独的页面，从搜索结果中呈现组件一次，并且需要重新加载每次。

Answer 1

尝试使用key={...}在 <MiniArtist />成分。并确保您指定一些唯一的东西作为键。 (例如 ID)

<MiniArtist key={item.id} data={item} />

它的作用基本上是告诉 React 列表中的哪些项目已更改以及哪些项目是相同的。