React組件默認道具與graphql

Question

我試圖從後端graphql服務提取記錄，並使用Array.map函數呈現它們。不幸的是，在他們被加載之前，我得到錯誤，因爲他們沒有定義我試圖在組件上設置默認道具，但它沒有奏效。我是否必須檢查一切是否已加載，或者是否有特定方法將默認值注入這些道具。我的代碼看起來像那樣

import React from 'react'; 
import { graphql } from 'react-apollo'; 
import { fetchTasks } from '../../../graphql/tasks'; 
import { Dashboard } from '../components/Dashboard'; 

const propTypes = { 
    data: React.PropTypes.shape({ 
     tasks: React.PropTypes.array 
    }) 
}; 

const defaultProps = { 
    data: { 
     tasks: [] 
    } 
}; 

class DashboardContainer extends React.Component { 
    render() { 
     const titles = this.props.data.tasks.map(task => task.title); 
     return(
      <Dashboard 
       titles={titles} 
      /> 
     ); 
    } 
} 

DashboardContainer.propTypes = propTypes; 
DashboardContainer.defaultProps = defaultProps; 

export default graphql(fetchTasks)(DashboardContainer); 

Answer 1

是的，你必須檢查查詢是否完成加載。你可以通過這個不錯的tutorial，在那裏你建立一個寵物小精靈應用程序。鏈接指向它們顯示基本查詢的部分以及如何檢查它是否已加載。

在你的情況可能是這樣的：

import React from 'react'; 
 
import { graphql } from 'react-apollo'; 
 
import { fetchTasks } from '../../../graphql/tasks'; 
 
import { Dashboard } from '../components/Dashboard'; 
 

 
const propTypes = { 
 
    data: React.PropTypes.shape({ 
 
    tasks: React.PropTypes.array 
 
    }) 
 
}; 
 

 
const defaultProps = { 
 
    data: { 
 
    tasks: [] 
 
    } 
 
}; 
 

 
class DashboardContainer extends React.Component { 
 
    render() { 
 
    if (this.props.data.loading) { 
 
     return <div > Loading < /div>; 
 
    } 
 

 
    const titles = this.props.data.tasks.map(task => task.title); 
 
    return (< 
 
     Dashboard titles = { 
 
     titles 
 
     } 
 
     /> 
 
    ); 
 
    } 
 
} 
 

 
DashboardContainer.propTypes = propTypes; 
 
DashboardContainer.defaultProps = defaultProps; 
 

 
export default graphql(fetchTasks)(DashboardContainer);