Question

我知道我已经接近了，但是无法弄清这里还需要做什么。

我有一个操作可以显示我需要的所有数据，但是我无法将这些数据转移到我的组件中：

这是动作：

  export const wishListActions = username => dispatch => {

  fetch(`${API_BASE_URL}/Wishlist/User/${username}`)
  .then(res => res.json())
  .then(data => {
  (data.map(i => {
    dispatch(findWishListSuccess(i.wishlists));
  }));
})
  .catch(error => console.log(error))
}

  export const FIND_WISHLIST_BEGIN = 'FIND_WISHLIST_BEGIN'
  export const findWishListBegin = wishlist => ({
    type: FIND_WISHLIST_BEGIN,
    wishlist
  });

  export const FIND_WISHLIST_SUCCESS = 'FIND_WISHLIST_SUCCESS'
  export const findWishListSuccess = wishlist => ({
    type: FIND_WISHLIST_SUCCESS,
    wishlist
  });

  export const FIND_WISHLIST_FAILURE = 'FIND_WISHLIST_FAILURE'
  export const findWishListFailure = wishlist => ({
    type: FIND_WISHLIST_FAILURE,
    wishlist
  });

这是减速器

const initialState = {
    //state.products.items is here
    wishlist: [{
        text: "Category - Christmas",
        items: [
            {
                name: "Fridge",
                salePrice: "200",
                image: "pictureurl.com",
                productUrl: "google.com"
            }
        ]

    }],
    loading: false,
    error: null
};

export default function wishlistReducer(state = initialState, action) {

    switch (action.type) {
        case FIND_WISHLIST_BEGIN:
            return {
                ...state,
                loading: true,
                error: null
            };

        case FIND_WISHLIST_SUCCESS:

            console.log(action.wishlist.items);
            return Object.assign({}, state, {
                wishlist: [
                    ...state.wishlist, {                    
                    items: action.wishlist    
                }
            ],
                loading: false
            });

这是组件：

export class Wishlist extends React.Component{
    componentDidMount(){
        if(window.localStorage.userName){
            this.props.dispatch(wishListActions(window.localStorage.userName));
        }
    } 

    render(){


        const userWishlist = this.props.wishlist.map(i => (     
            <div key={i.peoductUrl + i.name}>

                {console.log(i)}
                <div className="category">{i.text}</div>
                <div className="name">{i.name}</div>
                <div className="price">$ {i.salePrice}</div>
                <img className="image" src={i.image} alt={i.name}/>
                <a className="listing-url" href={i.productUrl}>Buy Now!</a>
            </div>

        ));

        return(

                <div className='user-wishlist'>
                    <h3>{this.props.title}</h3>
                    { userWishlist }        
                </div>  
            )
    }
}

Wishlist.defaultProps= {
    title: "My Wishlist",
    wishlist: [{
        text:"Presents",
        name:"VIZIO 4K TV",
        salePrice:"200",

    }]
}
const mapStateToProps = state => ({ 
    wishlist: state.wishlist
})

export default connect(mapStateToProps)(Wishlist);

当我单击我的redux chrome扩展工具时，它会显示多个愿望清单，但我的组件仍显示“初始状态”，其中已在组件中设置了Vizio 4k电视。我已经检查了现有问题，并且在训练营中至少参加了3次问答环节，但均未成功，因此如果这是“重复帖子”，我会提前道歉。

Answer 1

wishlistReducer构建的状态结构与Wishlist组件所期望的状态结构有所不同。 Wishlist组件期望使用以下形式的数组：

[
  { text: "", name: "", salesPrice: "" },
]

state.wishlist的格式如下：

[
  {
    items: [
      { name: "", salesPrice: "", image: "", productUrl: "" }
    ]
  }
]

因此，看来您的Wishlist组件实际上期望的是物品，而不是整个愿望清单。您的Wishlist组件应该看起来类似于以下示例：

export class Wishlist extends React.Component{
  render(){
    const userWishlist = this.props.wishlist.map(w => (
      <div key={w.name}>
        <h3>{w.name}</h3>
        {w.items.map(i => (
          <div key={i.productUrl + i.name}>
            {console.log(i)}
            <div className="category">{i.text}</div>
            <div className="name">{i.name}</div>
            <div className="price">$ {i.salePrice}</div>
            <img className="image" src={i.image} alt={i.name}/>
            <a className="listing-url" href={i.productUrl}>Buy Now!</a>
          </div>
        )}
      </div>
    ));

    return (
      <div className='user-wishlist'>
        <h3>{this.props.title}</h3>
        { userWishlist }        
      </div>  
    );
  }
}

尽管这时更多的是愿望清单，但是希望这可以说明状态结构是如何传递到您的Wishlist组件中的。

此外，这还假设wishlistReducer是您的根本根源。如果您使用的是combineReducers，则状态结构会更深一层，例如：

combineReducers({
  wishlist: wishlistReducer,
});

const mapStateToProps = state => ({ 
  wishlist: state.wishlist.wishlist
})

Redux-使用第三方API更新组件

1 个答案: