React 列表组件不会重新呈现新列表

Question

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

<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>
            );
    }
}

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

Answer 1

尝试在 <MiniArtist /> 组件中使用 key={...}。并确保您分配了一些 unique 作为键。 （例如 ID）

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

这是做什么的，基本上是告诉 React 列表中的哪些项目已经更改，哪些是相同的。

React 列表组件不会重新呈现新列表

React List Component does not rerender new list

javascript

state

spotify

reactjs