react 問題記錄二(側重於state或者說server層操做)

 項目體系說明：react+mobx+antd

 11. state設置對象屬性

 this.setState({
      tableParams:{tableName:value}
    })

 

 

 

10.loading組件設置

 

this.setState({
          title: Utils.trim(query.title),
          loading:true,
        });
        
        this.props.articleService.findPage(query, true)
          .then(data => this.setState({loading: false}))
          .catch(e => this.setState({loading: false}));

 

 

 

 

9.模態框彈出時，須要傳遞參數應該怎麼設置？

 

 

showModal = (obj,b) => {

    this.setState({
      visible: true,
      oldTopicId: obj.id,
    });
    console.log("a==============" ,obj);

    console.log("b==============" ,b);
    // 獲取主題詞下全部關鍵詞的id集合
    const myParams = {};
    myParams.topicId = obj.id;
    this.topicState.getKeyWordIds(myParams);
  };



//---------------------------------------------------------------------------
const columns = [{
      title: '主題',
      dataIndex: 'name',
      key: 'name',
    }, {
      title: '關鍵詞',
      dataIndex: 'keywords',
      key: 'keywords',
      render: (item) => item ? item.join('，') : ''
    }, {
      title: '操做',
      key: 'operation',
      render: (_, record) => (
        <div>
          <Link to={`/topic/${record.id}`}><Icon type="edit"/>編輯</Link>
          <span className="ant-divider"/>
            <a className="fgw-text-error" onClick={this.showModal.bind(this, record)}><Icon type="delete"/>刪除</a>

        </div>)
    }];

 

 

 

 

 

8.當切換路由後(切換了左側導航欄後)，用戶在返回以前查詢的結果界面，結果界面還會展現上一次的結果，應該如何處理呢？

 

//第一步

componentWillUnmount() {
 
  this.props.store.docClassifyState.clearClassifyResult();
}

//第二步，在對應的state裏面寫一個清空數據源的函數 /* * 清空已有的數據源 * */

clearClassifyResult(){
 this.setClassifyResult({});
 }

 

 

 

 

7.Input.Search組件下，如何配合分頁組件傳遞搜索框中的參數

 

constructor(props) { super(props); this.state = { params: '', }; this.store = this.props.store.websiteState; } const paginationProps = { pageSize: size || 0, currentPage: number || 0, totalElements: totalElements || 0, showSizeChanger: true, onChange: (page, size) => { this.store.getWebsitePage({page, size, name: this.state.params}); } }; <Input.Search placeholder="輸入網站名稱或網址進行搜索" onSearch={value =>{ if (value === this.state.params) { return } this.setState({params: value}); this.store.getWebsitePage({name: value}) }}/>

 

 

 

 

 

6.須要更新用戶信息時，須要把用戶原來的信息一塊兒傳回給後臺，這個時候推薦下面的寫法，首先

this.userState.user這個是數據源，而後...values 這個是表單中變化的值，經過新的值來覆蓋舊的值，達到更新數據的操做。

 

 

if (tag === 'user') { this.userState.updataUser({...this.userState.user,...values});//更新用戶信息
        }

 

 

 

 

5.業務場景：當用戶添加一條數據，好比添加一個用戶，可是用戶名已經存在了，這個時候須要提示給用戶並停留在當前的編輯界面，當操做成功後，跳轉到table列表界面上

主要說明兩點，其一異步操做，其二，state裏面注意須要添加 return date的操做：

 

//state //修改一條數據
 async updataRoom(value) { const {data} = await request( { method: 'put', url: '/api/room', data: value }, {message: '保存成功'}, {message: '保存失敗'}, ); this.setRoom(data); return data;//重要 } //異步調用
 handleSubmit = (e) => { e.preventDefault(); this.props.form.validateFieldsAndScroll((err, values) => { if (!err) { console.log('Received values of form: ', values); if (this.isAdd()) { //新增
                    this.roomState.createRoom(values).then((response)=> {
　　　　　　　　　　　　　　//取到後臺的返回 response 根據其中一個不爲空的值作判斷條件 const {status} = response; debugger; console.log('response',status); if(status){ Utils.goBack(); } }) } else { values.roomId = this.props.match.params.id; console.log('values of form: ', values); this.roomState.updataRoom(values).then((response)=> { console.log('response',response); const {status} = response; if(status){ Utils.goBack(); } }); //修改
 } } }); };

 

 

 

 

4.執行刪除操做後，界面從新查詢一次，就是把刪除後的效果呈現出來的操做模式

 

  /* * 根據主機Id刪除主機 * /api/host/{hostId} * */ async deleteRemoveHost(hostId,cabinetId) { const {data} = await request( {method: 'DELETE', url: `/api/host/${hostId}/remove`}, {message: '移除成功'}, {message: '移除失敗'}, ); this.getCabinetHost(cabinetId); } }

 

 

 

 

3.當state狀態發生改變會引起界面的重繪，即便數據改變會實現界面的從新渲染。這個思想比較重要，作說明一下(

this.setState({host: host});

)

constructor(props) { super(props); this.state ={ cabinetId: '', hostId: '',  host:{}, }; this.cabinetState = this.props.store.cabinetState; } /* * 用戶點擊主機後，取出主機的詳細信息展現在右側 * */ handleClick = (host) =>{ console.log('主機參數',host); this.state.host = host; this.setState({host: host}); this.state.hostId = host.hostId; console.log('當前主機',this.state.host.hostId); //this.renderParameter(host)
 }; renderParameter =()=>{ const hostObj = this.state.host; if(hostObj === null || hostObj ===undefined || !hostObj.hostId){ return <div><h3 className="fgw-margin-bottom-20">請點擊右側主機,可查看主機的詳情信息</h3></div> } console.log('主機參數',hostObj); console.log('服務參數', eval('('+hostObj.info+')')); //console.log('服務參數', JSON.stringify(hostObj.infos));
    //console.log('服務參數', JSON.parse(hostObj.infos));
 const info = eval('('+hostObj.info+')'); return( <div>
        <Col span={12}>
          <label className="hl-font-20">設備名稱:</label>
          <span>{hostObj.hostId}</span>
        </Col>
</div>
 ) ) };

 

 

 

1. react提交按鈕響應回車事件(基於react+Mobx的實現模式)

   handleSubmit = (e) => { e.preventDefault(); this.props.form.validateFieldsAndScroll((err, values) => { if (!err) { console.log('Received values of form: ', values); if (e.keyCode == 13)//回車鍵的鍵值爲13 { e.returnValue=false; e.cancel = true; this.store.getPolicyPage(values);//調用按鈕的事件 } this.store.getPolicyPage(values); } }); };

    

2. renderHotFont =()=>{ const hotFont = this.store.wordList; console.log("wordList",this.store.wordList); console.log("systemList",this.store.systemList.value); /*const sysList = []; for (itme of this.store.systemList){ }*/ const sysList = this.store.systemList.map(function (item) { return (item.value); }); let myList = []; if(sysList.length > 0){//作非空判斷 myList = sysList[0].split(',');//字符串轉成數組 } if (!this.store.systemList) { return <div style={{textAlign: 'center', paddingTop: '30px'}}>暫無關鍵詞</div>
    } return myList.map(doc => { const keyWord = this.store.wordList.find(temp => temp.id === doc);//從全部的關鍵詞中獲取對應的名字 debugger; return (<div className="fgw-word">{keyWord.name}</div>)
    }); /*if (!this.store.wordList) { return <div style={{textAlign: 'center', paddingTop: '30px'}}>暫無關鍵詞</div> } return this.store.wordList.map(doc => { return (<div className="fgw-word">{doc.name}</div>) });*/ };

    

3. //日期比較大小(開始時間不能大於結束時間約束)
    let params = {}; params.startTime = values.startTime.format('YYYY-MM-DD'); params.endTime = values.endTime.format('YYYY-MM-DD'); console.log('開始時間', params); if(Date.parse(params.endTime) - Date.parse(params.startTime) <= 0){ Modal.error({//使用模態框的error模式，須要引入對應的組件
                               title:'提示消息', content:'開始時間不能大於結束時間' }); return; }