Reactjs 为apollo客户端创建react组件，带有对象参数的简单模型

我知道react组件可以通过两种方式创建，一种是“扩展react.component”，另一种是在下面的组件中创建object。 我的问题是，在示例“const ChannelsList=（{data:{loading，error，channels}}”）中，参数是如何工作的

如果我在“数据”对象中更改xchannels的name“channel”，然后在“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这样的经典编程语言很简单：函数（参数）

组成部分：

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);

从“React”导入React；
进口{
链接
}从“反应路由器dom”
进口{
gql，
graphql，
}从‘阿波罗反应’；
从“/AddChannel”导入AddChannel；
const ChannelsList=（{data:{loading，error，channels}}）=>{
如果（装载）{
返回
加载…
；
}
如果（错误）{
返回{error.message}
；
}
返回(
它没什么问题

经典编程语言（如JavaScript）也可以很好地工作

与php相比，代码的工作原理相同：）

在本例中，
参数
是一个既有
数据
，又有
匹配
属性的对象

您可以轻松地将其转换为：

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

更进一步，我建议您阅读JavaScript中的对象分解


您还问：“参数是如何工作的？”

这些参数是渲染组件时发送的组件道具。
例如：

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


您好，谢谢您对函数的解释。我理解了，我更新了我的问题，因为我在组件上犯了一个错误，基本上是一样的，只是如果我将变量名“channel”更改为另一个，我会遇到问题，请查看我更新的问题。这是我们apollo的一个反应行为？尝试替换
ChannelD详细信息（{data:{loading，error，channels}}）
到
ChannelDetails（props）
。然后
console.log（props）
并检查输出。可能您无法更改属性名称。如果我在“加载、错误、通道”中更改变量的任何名称，也会出现错误…理论上，我可以根据需要命名变量？因此我猜您不能从
通道详细信息
组件更改它们的名称。父组件是谁？检查它如何将道具传递给
组件>ChannelDetails
我现在明白了，我不能更改名称变量，因为它不是像php函数那样的纯函数（parameter1，Parameter2..），而是一个将名称参数硬编码的对象，谢谢！