小编jhm*_*jhm的帖子

我遇到了新的FlatList组件的问题.具体来说,它不会重新渲染它的行,即使该行依赖于变化的道具.

FlatList文档说:

这是一个PureComponent,这意味着如果道具保持浅层相等,它将不会重新渲染.确保您的renderItem函数所依赖的所有内容在更新后作为非_ =的prop传递,否则您的UI可能无法更新更新.这包括数据支柱和父组件状态.

问题

但是,当我更改selectedCategory项目的ID时 - 应该指示行是否被"选中"的道具 - 我相信道具应该重新渲染.我错了吗？

我检查了列表和行组件的'componentWillReceiveProps'方法,列表接收更新就好了,但是从不调用行的生命周期方法.

如果我在列表组件中包含一个随机的,无用的布尔状态值,并在道具更新时来回切换它,它可以工作 - 但我不知道为什么？

state = { updated: false };

componentWillReceiveProps(nextProps) {
  this.setState(oldstate => ({
    updated: !oldstate.updated,
  }));
}

<FlatList
  data={this.props.items.allAnimalCategories.edges}
  renderItem={this._renderRow}
  horizontal={true}
  keyExtractor={(item, index) => item.node.id}
  randomUpdateProp={this.state.updated}
/>

代码

我的代码的结构是这样的:我有一个包含所有逻辑和状态的容器组件,它包含一个FlatList组件(表示,无状态),它还包含一个自定义的表示行.

Container
  Custom list component that includes the FlatList component
  (presentational, stateless) and the renderRow method
    Custom row (presentational, stateless)

容器包含此组件:

 <CustomList
   items={this.props.viewer}
   onCategoryChosen={this._onCategoryChosen}
   selectedCategory={this.state.report.selectedCategory}
 />

CustomList:

class CustomList extends Component {
  _renderRow = ({ item }) => {
    return …

所以,首先是一些背景知识.我是一名原生的iOS/Android开发人员,现在正在开始我的第一个React Native项目.它带来了Javascript的所有好处和痛苦,但到目前为止我非常喜欢它:-)我还决定第一次尝试使用GraphQL.

作为一般的React环境的新手,我也没有任何关于Relay的先验知识,但是在我的创业社区的朋友和我的web-dev同事的推荐下选择了它.我也被警告过一个有点陡峭的学习曲线,但无论如何我决定继续 - 我已经在与JS和一个新的移动平台的0.xx版本进行一场艰苦的战斗,所以到底是什么,对吧？:-)我设法正确地设置了我的项目并用一个整体通过我的GQL服务器QueryRenderer,这是一个很大的安慰:-)

所以,关于问题

我很难搞清楚容器/组件的关系,以及一般的容器组成.阅读关于作文的文档有所帮助,但我仍然怀疑作文的作用QueryRenderer

• QueryRenderer据说文档是每个中继树的根容器.这是否意味着QueryRenderer我们的应用程序中应该有一个root用户？或者在每个导航路径的根目录(即我们的应用程序中的选项卡)？或者仅针对每个容器组件(与表示/哑/纯组件相反,React明智)？请注意,我不是在寻找意见,而是寻求最佳实践:-)
• 一个FragmentContainer(或任何其他容器)可以在没有QueryRenderer"父"组件的情况下工作吗？
• 如何QueryRenderer链接到子容器？它是否获取子容器所需的所有数据的总和,然后从缓存中读取子容器,或者？如果是这样,我误解了Relay的优点 - 我们认为每个组件都可以独立于其他所有组件检索数据,并且每个组件都不了解其他组件(包括父/子组件)的数据要求).我认为这个假设也让我感到困惑QueryRenderer,并且需要一个"Root"容器.
• 如果QueryRenderer是中继树的"父"/"根"中继容器,那么它如何根据它的请求呈现视图组件呢？为什么它必须有一个请求？何时以及我们应该使用QueryRenderer什么？

任何帮助深表感谢 :-)

我在测试我的thunk时遇到了问题,因为我的许多API调用都在使用FormData,而我似乎无法弄清楚如何在测试中模拟它.我正在使用Jest.

我的安装文件如下所示:

import 'isomorphic-fetch';

// Mocking the global.fetch included in React Native
global.fetch = jest.fn();

// Helper to mock a success response (only once)
fetch.mockResponseSuccess = body => {
  fetch.mockImplementationOnce(() =>
    Promise.resolve({ json: () => Promise.resolve(JSON.parse(body)) })
  );
};

// Helper to mock a failure response (only once)
fetch.mockResponseFailure = error => {
  fetch.mockImplementationOnce(() => Promise.reject(error));
};

但是,我在所有需要FormData的测试中收到以下错误:

ReferenceError: FormData is not defined

我试图从导入FORMDATA文件react-native-mock,下src/Libraries/Network/FormData,但没有奏效.

所以我想知道是否有人有这样的运气？

总的来说,我很难找到fetch在React Native中模拟请求的最佳方法,所以这里的任何建议都会很好.我已经尝试了jest-fetch-mocklib(并打开了一个关于FormData的问题),尝试设置nock(没有运气),这个简单的Jest实现,但还没有感觉到.

我从Jest那里得到了每个手动模拟器的警告,因为它找到了它的.ts和.js版本,并要求我删除一个,即:

jest-haste-map: duplicate manual mock found:
  Module name: feedTestData
  Duplicate Mock path: /Users/[username]/Documents/git/[projectname]/src/state/ducks/feed/__mocks__/feedTestData.ts
This warning is caused by two manual mock files with the same file name.
Jest will use the mock file found in: 
/Users/[username]/Documents/git/[projectname]/src/state/ducks/feed/__mocks__/feedTestData.ts
 Please delete one of the following two files: 
/Users/[username]/Documents/git/[projectname]/dist/state/ducks/feed/__mocks__/feedTestData.js
/Users/[username]/Documents/git/[projectname]/src/state/ducks/feed/__mocks__/feedTestData.ts

我已经尝试用exclude我的密钥抄袭tsconfig.json,但我找不到匹配所有__mocks__文件夹的glob模式.

即从我的文件夹中"exclude":["**/__mocks__/*"]删除根__mocks__文件dist夹,但不删除任何子文件夹.

为了它的价值,我正在使用Expo + React Native.我的Jest设置package.json如下所示:

"jest": {
    "preset": "react-native",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "json"
    ],
    "transform": {
      "^.+\\.(js)$": …

正如标题所说，有什么方法可以将dotenv与 Bitbucket Pipelines 一起用于 CI 目的，同时仍将（可能是多个）添加(.stage).env到 .gitignore？

我知道 Pipeline 支持环境变量，并且可以在 bitbucket-pipelines.yml 中引用它们，但我无法弄清楚如何使用dotenv文件，并根据 ie 分支模式改变要使用的文件。

例如，我希望提交develop使用.test.env变量，而提交master使用来自.prod.env.

也许我走错了路？尽管其他网站使用多个.env文件的示例，但库作者不鼓励这种方法。我正在使用 Zeit Now 进行托管，因此我不能仅通过 SSH 将.env文件传输到服务器上。

非常欢迎任何建议:-)

我在 Expo 应用程序中实例化 I18n 时遇到问题。问题的 TL;DR 是需要翻译的组件在

Expo.Util.getLocaleAsync()

返回并设置语言环境。我不知道如何最好地设置它。到目前为止，我有一个 I18n 实例的文件，然后我将其导入并在我的应用程序中的其他任何地方使用。它看起来像这样：

import Expo from 'expo';
import I18n from 'i18n-js';
import english from './resources/strings/en';
import danish from './resources/strings/da';

I18n.defaultLocale = 'en-GB';
I18n.fallbacks = true;

I18n.initAsync = async () => {
  var locale = 'en-GB';
  try {
    locale = await Expo.Util.getCurrentLocaleAsync();
  } catch (error) {
    console.log('Error getting locale: ' + error);
  }

  I18n.locale = locale ? locale.replace(/_/, '-') : '';
};

I18n.translations = {
  en: english,
  da: danish,
};

export default I18n; …

因此，我有一个create-react-app-ts要Dockerize并托管在Zeit Now上的应用程序。

一切工作正常本地，运行yarn tsc和react-scripts-ts build伟大工程。

从以下Dockerfile创建Docker映像也非常有用：

FROM mhart/alpine-node:10.9
WORKDIR /usr/src

ARG REACT_APP_API_ENDPOINT
ARG NODE_ENV

COPY yarn.lock package.json ./
RUN yarn

COPY . .
RUN yarn build && mv build /public

但是，发布到Now时，生成脚本在Typescript编译时失败，从而为项目中的大多数文件输出编译错误。

如果我ENV NODE_ENV production在上面的Dockerfile中进行设置，我也可以在本地复制该文件WORKDIR...。

因此，似乎TypeScript或react-scripts-ts行为不同NODE_ENV=production。我以前从未遇到过此错误，而且我也不知道如何调试它。在本地运行NODE_ENV=production tsc或NODE_ENV=production react-scripts-ts build也可以正常工作。

我正在使用以下配置运行Typescript v 3.0.1：

{
  "compilerOptions": {
    "baseUrl": ".",
    "outDir": "build/dist",
    "module": "esnext",
    "target": "es6",
    "lib": ["es6", "dom", "esnext.asynciterable"],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react", …