爲apollo客戶端創建反應組件，使用對象參數創建簡單模型

Question

我知道可以通過兩種方式創建反應組件，可以使用「擴展React.Component」或僅在下面的組件中使用對象。 我的問題是，在第二種方式，它是如何工作的參數，在例如「const ChannelsList =（{data：{loading，error，channels}}）」

如果我更改namme'channel'for xchannels in在「數據」對象，然後我用它來嘗試這種新變化「xchannels.map（...）...）」，頁面給出錯誤：

ChannelsListWithData.js:24 Uncaught TypeError: Cannot read property 'map' of undefined 
    at ChannelsList (ChannelsListWithData.js:24) 
    at StatelessComponent.render (ReactCompositeComponent.js:44) 
    at ReactCompositeComponent.js:795 
    at measureLifeCyclePerf (ReactCompositeComponent.js:75) 
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:794) 
    at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:821) 
    at ReactCompositeComponentWrapper._updateRenderedComponent (ReactCompositeComponent.js:745) 
    at ReactCompositeComponentWrapper._performComponentUpdate (ReactCompositeComponent.js:723) 
    at ReactCompositeComponentWrapper.updateComponent (ReactCompositeComponent.js:644) 
    at ReactCompositeComponentWrapper.receiveComponent (ReactCompositeComponent.js:546) 
ChannelsList @ ChannelsListWithData.js:24 
StatelessComponent.render @ ReactCompositeComponent.js:44 
(anonymous) @ ReactCompositeComponent.js:795 
measureLifeCyclePerf @ ReactCompositeComponent.js:75 
_renderValidatedComponentWithoutOwnerOrContext @ ReactCompositeComponent.js:794 
    .... 

它的功能等不接受任何變量名稱。爲什麼？

它是如何工作的反應那個對象，參數和名稱的名稱，有一個鏈接要明白？像PHP經典PROGRAMM語言很簡單：函數（參數）

組件：

import React from 'react'; 
import { 
    Link 
} from 'react-router-dom' 

import { 
    gql, 
    graphql, 
} from 'react-apollo'; 

import AddChannel from './AddChannel'; 

const ChannelsList = ({ data: {loading, error, channels }}) => { 
    if (loading) { 
    return <p style={{color:"red"}}>Loading ...</p>; 
    } 
    if (error) { 
    return <p>{error.message}</p>; 
    } 

    return (
    <div className="channelsList"> 
     <AddChannel /> 
     { channels.map(ch => 
     (<div key={ch.id} className={'channel ' + (ch.id < 0 ? 'optimistic' : '')}> 
      <Link to={ch.id < 0 ? `/` : `channel/${ch.id}`}> 
      {ch.name} 
      </Link> 
     </div>) 
    )} 
    </div> 
); 
}; 

export const channelsListQuery = gql` 
    query ChannelsListQuery { 
    channels { 
     id 
     name 
    } 
    } 
`; 

export default graphql(channelsListQuery, { 
    options: { pollInterval: 10000 }, 
})(ChannelsList); 

該組件是從本教程：

https://dev-blog.apollodata.com/tutorial-graphql-input-types-and-client-caching-f11fa0421cfd

Answer 1

沒有什麼不妥的地方。

經典編程語言（如JavaScript）也可以正常工作。

用PHP側相比，代碼工作相同:)

在這個例子中，是parameters同時具有data，和match屬性的對象。

您可以輕鬆地將其翻譯成：

const ChannelDetails(parameters) { 
    const { data, match } = parameters 
    ... 
    // Classic way (like php I presume) 
    const data = parameters.data 
    const channel = parameter.data.channel 
} 

變本加厲，我建議你讀了JavaScript對象解構。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

還問： '？它是如何工作的參數..'

這些parameters是您渲染時發送的組件的道具。 例如：

<ChannelDetails 
    data={{ channel: [], loading: false, error: '' }} 
    match={"value here"} 
/>