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

Question

我知道可以通过两种方式创建 React 组件，使用 "extends React.Component" 或仅在下面的组件中创建对象。我的问题是，在第二种方式中，参数是如何工作的，在示例中 "const ChannelsList = ({ data: {loading, error, channels }})"

如果我更改 'data' 对象中 xchannels 的名称 '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
  ....

好像函数不接受任何变量名。为什么？

react那个object是怎么工作的，还有参数的名字和名字，有一个link明白吗。像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);

组件来自本教程：

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"}
/>

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

creation react component for apollo client, simple model with object parameters

reactjs

apollo

apollo-client