小编pet*_*gan的帖子

我正在学习graphql和react-apollo.我在我的代码中设置了一个搜索查询.我不确定如何将代码(即this.state.search)中的变量传递给我的grapnql调用.

我看过很多答案,包括这个答案,但似乎有点不同.

文档似乎也没有给出关于如何使用state作为变量的任何指导.

我的代码如下.

任何人都可以建议如何连接这两个？

import React, { Component} from 'react'
import { graphql } from 'react-apollo'
import gql from 'graphql-tag'

class Search extends Component {

  constructor(props) {
    super(props)
    this.state = {
      search: ''
    }
  }

  updateSearch = (e) => {
    this.setState({
      search: e.target.value
    })
  }

  submitSearch = (e) => {
    e.preventDefault()
    console.log(this.state)
  }

  render() {

    const { search } = this.state;

    return (
      <form onSubmit={ this.submitSearch }>
        <input 
          type='text'
          onChange={ this.updateSearch }
          value={ search …

我在输入以下内容时遇到问题。

问题出在TeamIcon.

我的对象定义如下。

import TeamIcon from './components/icons/TeamIcon';

export const teamObject: Record<
  string,
  Record<string, string | React.ReactSVGElement>
> = {
  team: {
    icon: TeamIcon,
    color: '#B2649B',
  }
}

我的TeamIcon看起来像这样：

export default (props: React.SVGProps<SVGSVGElement>) => (
  <svg width="18" height="14" viewBox="0 0 18 18" {...props}>
    <path
      fill="currentColor"
      fillRule="evenodd"
      d="..."
    />
  </svg>
);

然后显示以下错误：

JSX 元素类型“Icon”没有任何构造或调用签名。

const Icon = currentTeam.icon;

<Icon
  width="29px"
  height="29px"
  style={{ color: currentTeam.color }}
/>

有谁知道如何正确输入这个？

所以我正在阅读kubernetes和AWS服务产品。例如，kubernetes 的主要优势之一是负载均衡，但 AWS也有。

所有这些产品如何相互配合？他们中的很多人都在做同样的工作吗？现在有这么多工具只是一个例子吗？

也许这不是这个问题的正确论坛。如果不是，我可以删除，但只是对所有各种选项感到有些不知所措，并想知道它们是否都完全不同。

我最近更新了路由器版本4的反应.在以前的版本中,我使用onUpdate回调来触发一个功能,使路由更改时页面滚动到顶部.

它似乎onUpdate已被弃用,我无法在文档中的任何地方找到它所取代的内容.

还有其他人遇到过这个问题吗？

const handlePageChange = () => {
    window.scrollTo(0, 0);
};  

ReactDOM.render(
    <Provider store={store}>
        <Router onUpdate={handlePageChange} history={browserHistory}>
            <Redirect from="/" to="/music" />
            {routes}
        </Router>
    </Provider>,
    document.getElementById('root')
);

我正在从css迁移到styled-components.

我的反应组件如下所示:

class Example extends React.Component {

  ........code here

  render() {
    return (
      <div 
        className={ this.state.active ? "button active" : "button" }
        onClick={ this.pressNumber }
       >
          <Number>{ this.props.number }</Number>
      </div>
    )
  }
}

const Number = styled.div`
  color: #fff;
  font-size: 26px;
  font-weight: 300;
`;

我的CSS看起来像这样:

.button {
  height: 60px;
  width: 60px;
}

.active {
  animation-duration: 0.5s;
  animation-name: highlightButton;
}


@keyframes highlightButton {
  0%   {
    background-color: transparent;
  }
  50%  {
    background-color: #fff;
  }
  100%  {
    background-color: transparent;
  }
} …

我使用了一个app来引导它create-react-app.我有一个令牌,我不想推送给GitHub.

我跑了yarn add dontenv然后尝试将env变量导入我的App.js文件.

我的代码看起来像这样

.ENV

TOKEN=**************

然后我的app.js文件看起来像这样:

app.js

import React from 'react';
import ReactDOM from 'react-dom';
require('dotenv').config();

const App = props => {
    console.log(process.env.token);
    return <p>Test</p>
}

process.env.token是undefined.任何人都可以建议如何在前端使用溺爱或如何使用bootstrapped create-react-app来做到这一点？

我正在使用打字稿，并看到以下错误

[ts]元素隐式具有'any'类型，因为类型'{}'没有索引签名。[7017]

const store = {};
setItem: jest.fn((key, value) => {
    store[key] = value.toString();
})

我可以通过将商店设置为任何类似的方式来修复它

const store: any = {};

但我想输入它，但不知道该怎么做。有人可以帮忙吗？

I have defined two types, Team and Position. They are both part of an array that I iterate over in my react component.

based on the types defined below in my map function I am seeing the following error.

Examples of errors I am seeing.

Property 'name' does not exist on type 'Position'. [2339]

Property 'position' does not exist on type 'Team'. [2339]

Is it not possible to check that the array contains either type?

My code looks like …

我正在尝试向我的 graphql 服务器发送突变以更新日期。我的突变模式如下所示：

mutation CreateReminderMutation(
    $birthday: Date
) {
    createReminder(
        birthday: $birthday
    ) {
        id
    }
}

然后在我的反应组件中，我使用moment.

const Calendar = () => {
   // component and mutation implementation
   birthday: moment(birthday).toDate()
}

我收到以下错误消息：

[GraphQL 错误]：消息：变量“$birthday”得到无效值“2019-03-15T12:00:00.000Z”；预期类型日期；值不是有效日期：2019-03-15T12:00:00.000Z，无法解析，位置：[object Object]，路径：未定义

谁能建议如何Date在发送到graphql的同时获得正确的格式？

我正在使用React的componentDidUpdate生命周期方法.

我试图确定两个数组是否相同.

我的prevState数组看起来像这样:

prevState.players = [
  {
    name: 'Wayne Rooney',
    age: 31
  }, 
  {
    name: 'Lionel Messi',
    age: 29
  },
  {
    name: 'Robbie Fowler',
    age: 42
  }
];

并且this.state数组看起来像这样:

this.state.players = [
  {
    name: 'Wayne Rooney',
    age: 31
  }, 
  {
    name: 'Lionel Messi',
    age: 29
  },
  {
    name: 'Robbie Fowler',
    age: 42
  }
];

正如您所看到的,如果您展开下面的代码段,它们就不相同:

let playersOne = [{
    name: 'Wayne Rooney',
    age: 31
  },
  {
    name: 'Lionel Messi',
    age: 29
  },
  {
    name: …