Компонент React List не отображает новый список - PullRequest
Новая
       6

Компонент React List не отображает новый список

0 голосов
/ 08 марта 2020

Я работаю над клоном Spotify и в настоящее время использую функции поиска. Я уже настроил метод, который отправляет запрос в API Spotify, а затем возвращает список артиста, трека и альбомов, которые всплывают с этим результатом поиска, поэтому я хочу отобразить списки как мини-компоненты и сделать их повторное отображение когда вы меняете результат поиска и получаете новый обратный вызов с другими результатами.

<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, которые я делаю после первого обратного вызова. Есть ли способ исправить это, чтобы динамически изменяться вместе с изменением поиска, как в некоторых текущих приложениях, или это слишком много в плане производительности, и я должен вместо этого создать отдельную страницу, которая визуализирует компоненты из результатов поиска один раз и должна быть перезагружена каждый раз.

1 Ответ

1 голос
/ 08 марта 2020

Попробуйте использовать key={...} в компоненте <MiniArtist />. И убедитесь, что вы назначили что-то уникальное в качестве ключа. (например, Id) 

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

То, что это делает, говорит React, какие элементы в списке были изменены, а какие одинаковыми.

...