如下將fetch寫成函數,返回值時會發現,控制台顯示我的數據Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]],這樣的方式要如何取得資料來應用呢?。

將提取api fetch寫成函式調用

function apiGetAll (api) {
    return fetch(api, {
        headers: { "content-type": "application/json" }
    })
        .then(response => response.json().then(json => ({ json, response })))
        .then(({ json, response }) => {
            if (!response.ok) {
                return Promise.reject(json);
            }

            return json;
        })
        .then(response => response, error => error);
}
Add a comment

TableExport.js

簡單易用的Javascript插件,允許您只在一行代碼,會自動產生輸出Excel、txt、csv按鈕,快速動態地將HTML表格轉換為Excel電子表格 .xls .xlsx,逗號分隔值.csv和純文本 .txt。

下載和設置

使用<script>標籤手動安裝

要使用此插件,請在HTML文檔的結束標記之前包含jQuery庫,FileSaver.js腳本和 TableExport.js插件:

<script src="/jquery.js"></script>
<script src="/FileSaver.js"></script>
 ...
<script src="/tableexport.js"></script>
Add a comment

使用Javascript

最流行的答案是沒有jQuery的解決方案:

Node.contains()方法返回一個Boolean值,該值指示節點是否是給定節點的後代,即節點本身,其直接子節點之一(childNodes),子節點直接子節點之一等等。

document.addEventListener('mouseup', function (e) {
    var container = document.getElementById('your container ID');

    if (!container.contains(e.target)) {
        container.style.display = 'none';
    }
}.bind(this));
Add a comment

IndexRoute

在我們的應用中,如果訪問/ ,只會顯示一個空白頁。而我們的理想情況是先一個Home頁,所以我們先建立一個Home組件,再去講接下來怎麼做。新建文件modules/Home.js並添加代碼:

// modules/Home.js
import React from 'react'

export default React.createClass({
  render() {
    return <div>~~男神女神~~</div>
  }
})

一種方式是,先看App裡面有子路由激活嗎?如果沒有,你們顯示Home。這種方式,App.js的代碼為:

// App.js
import Home from './Home'
// ...
<div>
  {/* ... */}
  {this.props.children || <Home/>}
</div>
//...

這種方式也可以正常工作,但是我們更希望Home像Boys和Girls那樣,綁定到一個路由上。這才更符合React Router的思想,一個組件綁定到一個路由上,通過路由的嵌套、激活等顯示不同的界面。這種方式的實現要用到IndexRoute組件。只需改變index.js中的代碼:

Add a comment

簡單來說applyMiddleware是使action中能做更多的事情,如同去賦予執行action有能力在中間去多執行function,不同只是傳遞資料參數,thunk則在中間扮演著處理非同步問題。

Thunk應用增加延遲2秒

const { createStore, applyMiddleware } = Redux;
const { Provider, connect } = ReactRedux
const thunk = ReduxThunk.default
const Increment = () =>{
  return function (dispatch){
    setTimeout(()=>{
      dispatch({type: 'INCREMENT'})
    },2000)
  }
  // return {
  //     type: 'INCREMENT'
  // }
}
class Counter extends React.Component {
  render() {
    console.log(this.props);
    return (
      <div>
        <h2>Counter</h2>
        <div>
          <button onClick={this.props.decrement}>-</button>
          <span>{this.props.count}</span>
          <button onClick={this.props.increment}>+</button>
        </div>
      </div>
    )
  }
}
const actionsCreators = (dispatch)=> {
  return{
    increment: () => {
      //store.dispatch({ type: 'INCREMENT' });
      dispatch(Increment())
    },
    decrement : () => {
      dispatch({ type: 'DECREMENT' });
    }
  }
}
function mapStateToProps(state) {
  console.log(state);

  return {
    count: state.count
  };
}

const Concounter = connect(mapStateToProps,actionsCreators)(Counter);

const initialState = {
  count: 0
};

function reducer(state = initialState, action) {
  switch(action.type) {
    case 'INCREMENT':
      return {
        count: state.count + 1
      };
    case 'DECREMENT':
      return {
        count: state.count - 1
      };
    default:
      return state;
  }
}

const store = createStore(reducer,window.devToolsExtension ? window.devToolsExtension() : undefined ,applyMiddleware(thunk));

const App = () => (
  <Provider store={store}>
    <Concounter/>
  </Provider>
);

ReactDOM.render(<App />, document.getElementById('root'));
Add a comment