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

Posted 2023-03-10

【中文标题】为 apollo 客户端创建反应组件，带有对象参数的简单模型

【英文标题】：creation react component for apollo client, simple model with object parameters

【发布时间】：2018-02-17 01:06:15

【问题描述】：

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

如果我在“数据”对象中更改 xchannels 的名称“通道”，然后我在 "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那个对象中工作的，以及参数名称和名称，有链接可以理解吗？像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

【参考方案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"
/>

【讨论】：

您好，感谢您对函数的解释。我明白了，我已经更新了我的问题，因为我在组件上犯了一个错误，基本上是一样的，只有如果我将变量名“通道”更改为另一个，我会遇到问题，请查看我更新的问题。这是我们阿波罗的反应行为？

尝试将ChannelDetails( data: loading, error, channels ) 替换为ChannelDetails(props)。然后console.log(props) 并检查输出。也许您无法更改属性名称。

如果我在“加载、错误、通道”中更改任何变量名称也会出现错误...理论上我可以按我的意愿命名变量？

所以我猜你不能从ChannelDetails 组件中更改它们的名称。谁是父组件？检查它是如何将道具传递给ChannelDetails

我现在明白了，我不能更改名称变量，因为它不是像 php 函数（parameter1，parameter 2..）这样的纯函数，而是一个将名称参数硬编码的对象，谢谢！跨度>