请问我在第一次搜索商品ID时,返回的依然是完整的list的数据,是我代码那点错了吗

来源:8-5 商品列表的开发(4)

Lex_Pierce

2018-09-01

当我第一次点击搜索商品ID的时候,请求的地址是/manage/product/search.do 请求数据是pageNum:1 porductId:26 但是返回的数据并没有变化。如果切换到商品名称,再切换回来就恢复正常了。

http://img.mukewang.com/szimg/5b89dde500015a0428121268.jpg

http://img.mukewang.com/szimg/5b89de0f00012e1228321340.jpg

index.jsx

import React from 'react';
import PageTitle from 'component/page-title/index.jsx';
import TableList from 'util/table-list/index.jsx';
import { Link } from 'react-router-dom';
import Pagination from 'util/pagination/index.jsx';
import Product from 'service/product-service.jsx';
import MUtil from 'util/mm.jsx';
import ListSearch from './index-list-search.jsx';
import './index.scss';

const _mm = new MUtil();
const _product = new Product();

class ProductList extends React.Component {
constructor(props) {
super(props);
this.state = {
list: [],
pageNum: 1,
listType: 'list',
};
}

componentDidMount() {
this.loadProductList();
}

  // 加载商品列表
loadProductList() {
const listParam = {};
listParam.listType = this.state.listType;
listParam.pageNum = this.state.pageNum;
    // 如果是搜索则需要传入类型和搜索关键字
if (this.state.listType === 'search') {
listParam.searchType = this.state.searchType;
listParam.keyword = this.state.searchKeyword;
}
    // 请求接口
_product.getProductList(listParam)
.then((res) => {
this.setState(res);
})
.catch((errMsg) => {
this.setState({
list: [],
});
_mm.errorTips(errMsg);
});
}

  // 搜索
onSearch(searchType, searchKeyword) {
const listType = searchKeyword === '' ? 'list' : 'search';
this.setState({
listType,
pageNum: 1,
searchType,
searchKeyword,
}, () => {
this.loadProductList();
});
}

  // 页面发生变化的时候
onPageNumChange(pageNum) {
this.setState({
pageNum,
}, () => {
this.loadProductList();
}).catch((errMsg) => {
_mm.errorTips(errMsg);
});
}

  // 改变商品状态,上架 、下架
onSetProductStatus(e, productId, currentStatus) {
const newStatus = currentStatus === 1 ? 2 : 1;
const confrimTips = currentStatus === 1 ? '确定要下架该商品?' : '确定要上架该商品?';
if (window.confirm(confrimTips)) {
_product.setProductStatus({
productId,
status: newStatus,
}).then((res) => {
_mm.successTips(res);
this.loadProductList();
}).catch((errMsg) => {
_mm.errorTips(`${errMsg}错了`);
});
}
}

render() {
const tableHeads = [
{ name: '商品ID', width: '10%' },
{ name: '商品信息', width: '50%' },
{ name: '价格', width: '10%' },
{ name: '状态', width: '15%' },
{ name: '操作', width: '15%' },
];
return (
<div id="page-wrapper">
<PageTitle title="商品列表" />
<ListSearch onSearch={(searchType, searchKeyword) => {
this.onSearch(searchType, searchKeyword);
}}
/>
<TableList tableHeads={tableHeads}>
{
this.state.list.map((product, index) => (
<tr key={index}>
<td>
{product.id}
</td>
<td>
<p>
{product.name}
</p>
<p>
{product.subtitle}
</p>
</td>
<td>
¥
{product.price}
</td>
<td>
<p>
{product.status === 1 ? '在售' : '已下架'}
</p>
<button
className="btn btn-xs btn-warning"
onClick={(e) => { this.onSetProductStatus(e, product.id, product.status); }}
>
{product.status === 1 ? '下架' : '上架'}
</button>
</td>
<td>
<Link className="opear" to={`/product/detail/${product.id}`}>
详情
</Link>
<Link className="opear" to={`/product/save/${product.id}`}>
编辑
</Link>
</td>
</tr>
))
}
</TableList>
<Pagination
current={this.state.pageNum}
total={this.state.total}
onChange={pageNum => this.onPageNumChange(pageNum)}
/>
</div>
);
}
}

export default ProductList;

product.service.jsx

import MUtil from 'util/mm.jsx';

const _mm = new MUtil();
class Product {
  // 获取用户列表
getProductList(listParam) {
let url = '';
const data = {};
if (listParam.listType === 'list') {
url = '/manage/product/list.do';
data.pageNum = listParam.pageNum;
} else if (listParam.listType === 'search') {
url = '/manage/product/search.do';
data.pageNum = listParam.pageNum;
data[listParam.searchType] = listParam.keyword;
}
return _mm.request({
type: 'post',
url,
data,
});
}

  // 变更商品销售状态
setProductStatus(productInfo) {
return _mm.request({
type: 'post',
url: '/manage/product/set_sale_status.do',
data: productInfo,
});
}
}

export default Product;

望老师解惑

写回答

1回答

Lex_Pierce

提问者

2018-09-01

找到问题所在了!

是因为index-list-search.jsx代码问题

0
2
虚空漫步
我也遇到相同的问题 请问是哪里出问题了呢
2019-12-10
共2条回复

React16+React-Router4 打造企业级电商后台管理系统

【毕设面试】让缺乏框架开发经验的你掌握框架开发

976 学习 · 405 问题

查看课程