刷新列表时无法重置redux的状态

Posted 2021-04-18

请参阅附件。当在网站上的页面之间切换时，相同的记录会附加到列表中。下面是代码。

我创建了一个reducer来从节点获取数据并呈现列表。正如您在函数render（）中所看到的，this.props.categoryListing在UI上呈现数据。

但是当我从任何其他页面返回到我的这个列表页面时，相同的记录会出现两次，三次以上。

    renderCategory(category){
            const id = '/image_listing/' + category.id;
            return(
                <tr>
                    <td><a href={id}>{category.category}</a></td>
                    <td>{category.count}</td>
                    <td>
                        <span><img onClick={() => this.updateCategory(category.id)} className="edit" src="../../img/edit.png" /></span>
                        <span><img onClick={() => this.deleteCategory(category.id, category.category)} className="delete" src="../../img/delete.png" /></span>
                    </td>
                </tr>
            )
        }


      render() {
         return (
            <div>
                <table>
                    <tr className="tableHeader">
                        <th>Category</th>
                        <th>Total Images</th>
                        <th>Action</th>
                    </tr>
                        {this.props.categoryListing.map(this.renderCategory.bind(this))}
                </table>
            </div>

        );
      }
    }

    function mapStateToProps(state) {
        //debugger;
      return { 
            categoryListing: state.categoryListing,
            postRequestReducer: state.postRequestReducer
        };
    };

请建议解决方案。

Action file code:

export function fetchCategoryListing() {
    var response = axios.get('http://localhost/get_category');
        return { 
            type: CATEGORY_LISTING, 
            payload:  response
    }
};

Reducer file code:
unction categoryReducer(state = [], action) {
  switch (action.type) {
    case CATEGORY_LISTING:
        return [ ...state, ...action.payload.data.result ];

    default:
      return state;
  }
};

export default categoryReducer;

答案

我检查了你的响应对象，结构是{"result":[{"id":60,"category":"Test","count":3}]}

基于上述响应结构，在动作文件中你应该： -

export function fetchCategoryListing() {
    var response = axios.get('http://49.50.102.36:3090/get_category');
    return { 
        type: CATEGORY_LISTING, 
        payload: response.result
    }
 };

然后在你的减速机内你应该有这样的东西： -

const initialState = {
    categoryListing: []
};

export default categoryReducer(state = initialState, action) {
   switch (action.type) {
       case CATEGORY_LISTING:
           return Object.assign({}, state, action.payload);
       default:
           return state;
    }
}

最后，您可以为表行添加一个唯一键，如下所示： -

return(
     <tr key={category.id}>
         <td><a href={id}>{category.category}</a></td>
         <td>{category.count}</td>
         <td>
             <span><img onClick={() => this.updateCategory(category.id)} className="edit" src="../../img/edit.png" /></span>
                    <span><img onClick={() => this.deleteCategory(category.id, category.category)} className="delete" src="../../img/delete.png" /></span>
                </td>
            </tr>
)

我希望你觉得这对你有帮助。