请问我在第一次搜索商品ID时,返回的依然是完整的list的数据,是我代码那点错了吗
来源:8-5 商品列表的开发(4)

Lex_Pierce
2018-09-01
当我第一次点击搜索商品ID的时候,请求的地址是/manage/product/search.do 请求数据是pageNum:1 porductId:26 但是返回的数据并没有变化。如果切换到商品名称,再切换回来就恢复正常了。
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代码问题
022019-12-10
相似问题