Question

我是Redux初学者。我昨天开始了旅程。也许这是我无法解决的最基本的问题。

我想通过单击排序按钮来更新视图。当我登录（this.props.albums）时，它会更新，但仅在console.log中。视图未更新。

这是我用来放置数据的fetchAlbums函数。 this.props.albums是我用来排序然后更新的数据。如您所见，我使用console.log（this.props.albums）并进行了排序。但是我的反应视图没有刷新。

class AlbumSearchContainer extends Component {
  state = {
    albumInput: '',
  };

  searchForAlbums = async event => {
    event.preventDefault();

    const albumName = this.state.albumInput;

    const api_call = await fetch(
      `https://api.spotify.com/v1/search?q=album%3A${albumName}&type=album`,
      {
        headers: { Authorization: `Bearer ${accessToken}` },
      }
    );

    const data = await api_call.json();

    this.props.fetchAlbums(data.albums.items);
    this.setState({ albumInput: '' });
  };

  handleChange = event => {
    this.setState({ albumInput: event.target.value });
  };

  render() {
    let albumsList = [];

    if (this.props.albums.length > 0) {
      albumsList = this.props.albums.map(element => (
        <AlbumComponent
          key={element.id}
          name={element.name}
          image={element.images[1].url}
          artist={element.artists[0].name}
          release_date={element.release_date}
          total_tracks={element.total_tracks}
          id={element.id}
          href={element.href}
        />
      ));
    }

    return (
      <div className="App">
        <Jumbotron style={{ backgroundColor: '#1ED760' }}>
          <h1>Search using Album Name</h1>
          <SearchingForm
            searchForAlbums={this.searchForAlbums}
            onChange={this.handleChange}
            value={this.state.albumInput}
          />

          {this.props.albums.length > 1 ? (
            <div>
              <p>
                <button
                  className="sortButton"
                  onClick={() => {
                    this.props.sortAlpha(this.props.albums);
                    console.log(this.props.albums);
                  }}
                >
                  Sort Alpha
                </button>

                <button
                  className="sortButton"
                  onClick={() => {
                    this.props.fetchAlbums(
                      this.props.albums.sort((a, b) => {
                        return (
                          new Date(b.release_date) - new Date(a.release_date)
                        );
                      })
                    );
                    console.log(this.props.albums);
                  }}
                >
                  Sort by date
                </button>
              </p>
            </div>
          ) : (
            console.log()
          )}
        </Jumbotron>
        <div className="albumContainer"> {albumsList}</div>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  albums: state.albums,
});

const mapActionsToProps = dispatch => {
  return {
    fetchAlbums: albums => dispatch({ type: 'FETCH_ALBUMS', payload: albums }),
    sortAlpha: albums =>
      dispatch({ type: 'SORT_ALBUMS_ALPHA', payload: albums }),
  };
};

export default connect(
  mapStateToProps,
  mapActionsToProps
)(AlbumSearchContainer);

我只想更新有关排序按钮单击的视图。

//当我开始在专辑中输入内容时，请进行编辑。但是单击按钮并不会刷新。

Answer 1

逻辑错误对：

您在错误的位置执行了排序算法。相册数组是您状态的一部分。您的状态通过道具传递到组件中。每当相簿阵列发生变化时，您的组件都会更新。
您没有分派排序操作。 redux应用程序的基本生命周期是无止尽的用户操作=>状态更新链。发生用户操作（例如，排序点击）时，您应该分派操作。在减速机中，您应该对专辑进行排序

编辑：关于您的评论，在redux世界中没有

我想点击一下

至少未实现。用户单击时，您只需要做的就是调度操作。一旦有了这种心态，将动作和状态更新分开就可以了。

Answer 2

我不确定您的fetchAlbums为什么不起作用，但这应该起作用：

searchForAlbums = async event => {
    event.preventDefault();

    const albumName = this.state.albumInput;

    const res = fetch(`https://api.spotify.com/v1/search?q=album%3A${albumName}&type=album`)
      .then(res => res.json())
      .then(albums => {
        this.props.fetchAlbums(albums);
        this.setState({ albumInput: '' });
      })
      .catch(error => console.log(error));
}

您的减速器缺少album状态：

const initialState = {
    artists: {},
    albums: []
};

您没有正确更新商店，这是正确的模式：

const albums = (state = initialState, action) => {
    switch (action.type) {
        case FETCH_ALBUMS:
            return { ...state, albums: action.payload };
        case SORT_ALBUMS_ALPHA:
            let newAlbums = action.payload.sort((a, b) => {
                if (a.name < b.name) return -1;
                if (a.name > b.name) return 1;
                return 0;
            });

            return {...state, albums: newAlbums };
        case FETCH_ARTISTS:
            return {...state, artists: action.payload);
        default:
            return state;
    }
};

请检查这些修改，并让我们知道输出

商店已刷新，但调度未呈现新视图

2 个答案: