react.js - react 接口数据放组件哪个地方？

问题描述

问 题

用的dva redux ，model如下,目前在调试中，所以是死数据：

export default {
  namespace: 'qrcode',
  state: {
    qrListData: {
      data: [{img : "www.baidu.com", name : '二维码图片1', "tag" : ["潜在客户1","潜在客户4"], vip : "VIP1", smNum : 211, fansNum: 12, state : '正常'},
        {img : "www.baidu.com", name : '二维码图片2', "tag" : ["潜在客户2"], vip : "VIP2", smNum : 211, fansNum: 22, state : '不正常'},
        {img : "www.baidu.com", name : '二维码图片3', "tag" : ["潜在客户3"], vip : "VIP3", smNum : 1112, fansNum: 32, state : '正常'}],
      "pageNo":1,
      "pageSize":10,
      "pageTotal":1,
      "total":4
    }
  },
  reducers: {},
  effects: {},
  subscriptions: {}
};

组件部分：

class Qr extends React.Component {

  constructor(props) {
    super(props);
    const data = this.props.data;
    this.state = {
      showNewGroupDialog: false,
      showBatchGroupDialog: false,
      isAllSelected : false,
      data : data.data,
      groupData : [{id:"1", name: '分组一'},{id:"2", name: '分组二'}],
      qrGroupData : [{id:"1", name: '分组一'},{id:"2", name: '分组二'}]
    };
    this.handleShowNewGroupDialog = this.handleShowNewGroupDialog.bind(this);
    this.handleHideNewGroupDialog = this.handleHideNewGroupDialog.bind(this);
    this.handleShowBatchGroupDialog = this.handleShowBatchGroupDialog.bind(this);
    this.handleHideBatchGroupDialog = this.handleHideBatchGroupDialog.bind(this);
    this.addItemSelectState = this.addItemSelectState.bind(this);
    this.setState({data : this.addItemSelectState(this.state.data)});
    this.selectItem = this.selectItem.bind(this);
    this.selectAll = this.selectAll.bind(this);
    this.delGroup = this.delGroup.bind(this);
  }
  //为每个data里面的item设置isSelect属性，表示是否选中
  addItemSelectState(data){
    if (!data || data.length == 0){
      return [];
    }
    for (let i = 0; i < data.length; i++){
      let tmpItem = data[i];
      tmpItem.isSelected = false;
      data[i] = tmpItem;
    }
    return data;
  }
  /*全选按钮*/
  selectAll(){
    let data = this.state.data;
    let allSelect = this.state.isAllSelected ? false : true;
    for( let i = 0; i < data.length; i++){
      let tmpItem = data[i];
      tmpItem.isSelected = allSelect;
      data[i] = tmpItem;
    }
    this.setState({data: data, isAllSelected : allSelect});
  }
  /*单个item选中处理*/
  selectItem(key){
    let data = this.state.data;
    let totalSelect = 0;
    let dataLength = data.length;
    for(let i = 0 ; i < dataLength; i++){
      if(i == key){
        data[key]['isSelected'] = data[key]['isSelected'] ? false : true;
      }
      if(data[i]['isSelected'] == true){
        totalSelect +=1;
      }
    }
    this.setState({data: data});
    if(totalSelect == dataLength){
      //全选
      this.setState({isAllSelected : true});
    }else{
      this.setState({isAllSelected : false});
    }
  }
  handleShowNewGroupDialog() {
    this.setState({showNewGroupDialog: true});
  }

  handleHideNewGroupDialog() {
    this.setState({showNewGroupDialog: false});
  }

  handleShowBatchGroupDialog(e) {
    e.preventDefault();
    this.setState({showBatchGroupDialog: true});
  }

  handleHideBatchGroupDialog(e) {
    e.preventDefault();
    this.setState({showBatchGroupDialog: false});
    e.stopPropagation();
  }
  delGroup(id,e){
    console.log(1111);
    console.log(id);
  }
  render() {
    //const data = [0, 1, 2, 3, 4];
    //const { data } = this.props;
    //console.log(data);
    let data = this.state.data;
    //console.log('>>>>>>>>>>>>>');
    //console.log(data);
    //console.log(`this.state.showBatchGroupDialog=${this.state.showBatchGroupDialog}`);
    return (
      <div>
        <div className="lcx02_pageTitle">参数二维码</div>
        <div className="lcx02_newQrCode-wrap">
          <div className="lcx02_newGroup-left">
            <Link to="/wx/qrcode/new" className="lcx_btn-danger btn-hg">新建参数二维码</Link>
            <div className="lcx02_newGroup">
              <button className="lcx_btn-default" onClick={this.handleShowNewGroupDialog}>+新建分组</button>
              <NewGroupDialog show={this.state.showNewGroupDialog} hideFunc={this.handleHideNewGroupDialog} />
              <ul className="lcx02_newGroup-list">
                {this.state.qrGroupData.map((item, index) => (
                  <li key={index}>
                    <span className="text-ellP">{item.name}</span>
                    <span className="lcx02_delete fr" onClick={(e) => {this.delGroup(item.id, e)}} />
                    <span className="lcx02_edit fr" />
                  </li>
                ))}
              </ul>
            </div>
          </div>
          <div className="lcx02_QrInfo-list">
            <div className="lcx_search-wrap lcx02_Qr-code fr">
              <input className="fl" type="text" placeholder="输入规则名" />
              <button className="lcx_search-btn fl">搜索</button>
            </div>
            <input type="checkbox" id="selAll" checked={this.state.isAllSelected} onClick={this.selectAll} /><label htmlFor="selAll" className="lcx02-checkAll">全选</label>
            <a href="a" className="lcx02_batchGroup lcx_btn-default" onClick={this.handleShowBatchGroupDialog}>批量分组
              <BatchGroupDialog show={this.state.showBatchGroupDialog} hideFunc={this.handleHideBatchGroupDialog} groupData={this.state.groupData} />
            </a>
            <a href="a" className="lcx_btn-default">批量停用</a>
            <table className="lcx_table-default">
              <thead>
                <tr>
                  <th className="lcx_wd5 lcx_tl" />
                  <th>二维码图片</th>
                  <th>名称</th>
                  <th className="lcx_wd15">标签</th>
                  <th>分组</th>
                  <th>扫码次数</th>
                  <th>新粉丝数</th>
                  <th className="lcx_wd10">
                    <select name="" id="">
                      <option value="">全部</option>
                      <option value="">全部</option>
                      <option value="">全部</option>
                    </select>
                  </th>
                  <th className="lcx_wd20 lcx_tr">操作</th>
                </tr>
              </thead>
              <tbody>
                {data.map((item, index) => (<QrItem qrIndex={index} key={index} selectItem={this.selectItem} item={item} />))}
              </tbody>
            </table>
            <div className="lcx_page-wrap">
              <span>共计2条，每页显示10条</span>
              <button className="lcx_pre-page" />
              <button className="lcx_next-page" />
              <span className="lcx_go-page">共1页，第<input type="text" />页</span>
              <button className="lcx_cancel-btn">确定</button>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
Qr.propTypes = {
  data: React.PropTypes.shape({})
};
const mapStateToProps = ({ qrcode }) => {
  return {
    data: qrcode.qrListData
  };
};

export default connect(mapStateToProps)(Qr);

接口数据我在constructor里面直接放state里面了，上述代码目前调试没什么多大的问题。但是我不太清楚，接口数据是不是在constructor赋值到state里面，大家的接口数据都是放哪里，然后提供给组件调用的？

解决方案

一般来说，抽组件的动机有两点：1-减少耦合，职责分离，2-实现共享。为了实现这两点，那组件必须是无状态的。要实现无状态，那么渲染这个组件需要的数据都应该通过props传进来。

这篇关于react.js - react 接口数据放组件哪个地方？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！