小编Kar*_*lor的帖子

我正在努力让我的第一个writeFragment工作。

这是对象形状：

resolutions {
  _id
  name
  completed
  goals {
    _id
    name
    completed
  }
}

我刚刚在客户端上运行了一个成功添加 new 的突变goal，现在我试图让客户端页面自动更新并显示刚刚添加的新目标。

我有readFragment工作。它成功读入决议。我正在阅读决议，而不是目标，因为作为属于决议的领域，目标没有自己的 id。

这是我的update函数，显示readFragment和writeFragment：

resolutions {
  _id
  name
  completed
  goals {
    _id
    name
    completed
  }
}

...这是片段的gql：

   const GET_FRAGMENT_GOAL = gql`
    fragment targetRes on resolutions {
      name
      completed
      goals {
        _id
        name
        completed
      }
    }
  `;


  const SET_FRAGMENT_GOAL = gql`
    fragment targetGoal on resolutions {
      __typename
      goals
    }
  `;

这是我收到的控制台错误：

您正在使用简单（启发式）片段匹配器，但您的查询包含联合或接口类型。

Apollo …

我正在尝试延迟加载一些 React 组件，如下所示：

节点：v10.15.2

const Library = React.lazy(() => import('./components/Library'))`

我的错误：

Module parse failed: Unexpected token (51:9)
You may need an appropriate loader to handle this file type.
|
| var Library = React.lazy(function () {
>   return import('./components/Library');
| });

网页包配置：

{
  test: /\.js$/,
  exclude: /node_modules/,
  use: {
    options: {
      presets: ['@babel/env', '@babel/react', '@babel/preset-flow'],
      plugins: [
        '@babel/plugin-transform-runtime',
        '@babel/syntax-dynamic-import',
        '@babel/plugin-proposal-class-properties',
        '@babel/plugin-syntax-throw-expressions',
      ],
    },
    loader: 'babel-loader?cacheDirectory',
  },
},

package.json

"dependencies": {
    "@babel/runtime": "^7.1.2",
    "axios": "^0.18.0",
    "babel-cli": "^6.26.0",
    "css-modulesify": "^0.28.0",
    "hls.js": …

我有一个基于React的Web应用程序，可从Jenkins API检索数据。在componentDidMount（）函数期间，我正在调用第一个API，这将启动API调用流程。然后，我将使用API​​中的数据来呈现组件。

Jenkins服务器每天早上7点开始构建每个项目。因此，我想每天晚上8点左右从React调用这些API。

我们是否可以安排React来调用这些API并获取它在一天中特定时间的更新数据？还是刷新浏览器等会产生新的API数据？我是React的新手，非常感谢您的建议。

我正在尝试创建一个可以在浏览器中使用的 npm 模块。

我正在使用打字稿和汇总。

我的tsconfig.json是：

{
  "compilerOptions": {
    "module": "CommonJS",
    "outDir": "lib",
    "strict": true,
    "rootDir": "src"
  }
}

我的rollup.config.js是：

import typescript from "@rollup/plugin-typescript";

export default {
  input: "src/index.ts",
  output: {
    dir: "lib",
    format: "iife",
  },
  plugins: [typescript()],
};

里面src/index.ts我有以下内容：

// src/index.ts
import log from './log'

const myFn = () => {
 ...myFn code
}

我的问题是，在捆绑包中，我得到以下内容：

// lib/index.js bundle
var log_1 = require("./log");

当我实际上想将log文件捆绑在 main 中时lib/index.js。

我如何使用 Typescript 和 rollup 来做到这一点？ …

我正在尝试使用flex创建一个双列网格.一列将用于显示单词或短语,第二列将用于翻译第一列.这是一个链接:http://imgur.com/nZGo8pb,让您了解我想要实现的目标.

我无法并排获得两列.我只能让我的话语出现在彼此之上.这是最好的尝试.一个巨大的失败.http://imgur.com/a/ICApr

我的代码是:

nent} from 'react';
import { Text, View,StyleSheet,Image,TextInput,ListView} from 'react-native';

class AddWords extends Component{

    state = {words:['iku','konkai','kaikan'],
             word:'',
             EnglishWords:['go','this time','next time']    
            }

    renderList(tasks){
      return(
        tasks.map((task) =>{
         return(
            <View key={task} style={styles.item}>
             <Text>
             {task}
             </Text>
              <Text>
             </Text> 
            </View>
            )   

        })

      )
    }
    renderEnglishWords(english){
      return(
        english.map((english) =>{
         return(
            <View key={english} style={styles.item2}>
             <Text>
             {english}
             </Text>
              <Text>
             </Text> 
            </View>
            )   

        })

      )
    }
    addWord(){
        let words = this.state.words.concat([this.state.word]);
        this.setState({words})


    }
    render(){
        return(
         <View style={styles.container}>
          <TextInput
            style={styles.input}
            onChangeText={(word) => …

我有一些代码，其中有x个项目的数组。在这种情况下，视频是我想要随机调用的视频，但是，如果当前已调用的视频与随机数相同，则我希望它生成另一个随机数，直到其唯一为止。

这是我的代码：

var videoLinks = [
    ['<iframe id="vid" src="https://www.youtube.com/embed/nYm2G4MnSkY?autoplay=1" frameborder="0" allowfullscreen></iframe>'],
    ['<iframe id="vid" src="https://www.youtube.com/embed/wAgZVLk6J4M?autoplay=1&start=5&end=45" frameborder="0" allowfullscreen></iframe>'],
    ['<iframe id="vid" src="https://www.youtube.com/embed/ix9wpslKwBE?autoplay=1" frameborder="0" allowfullscreen></iframe>'],
    ['<iframe id="vid" src="https://www.youtube.com/embed/OJJ-iLsQOPc?autoplay=1&iv_load_policy=3" frameborder="0" allowfullscreen></iframe>'],
    ['<iframe id="vid" src="https://www.youtube.com/embed/rore790l_sk?autoplay=1&start=12&end=94" frameborder="0" allowfullscreen></iframe>'],
];

var randomNumber = function () {
    var getRandomNumber = Math.floor(Math.random() * 5);
    var random = videoLinks[getRandomNumber]
    document.getElementById("videoWrapper").innerHTML = random[0];
};

randomNumber(); // To call the function on load

在componentWillMount我正在注册一个onSnapshot函数来更新状态。

componentWillMount () {
    todoRef.onSnapshot((doc) => {
      let todos = []
      doc.forEach(doc => {todos.push(doc.data())})
      this.setState({
        todos
      })
    })
  }

但是，firebase / firestore的工作方式是仅按随机键，因此当我取回数据时，其顺序不正确。

我知道有一个.orderByValue()函数，但是我尝试实现它，但似乎无法弄清楚。

我正在使用 Jest 和react-native-testing-library来测试我的组件。

在我的一个组件中，我有以下代码：

const handleToggleFilters = () => {
  LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
  setPostFiltersActive(!postFiltersActive);
};

但是，在测试我的组件时，出现以下错误

    TypeError: require(...).configureNextLayoutAnimation is not a function

      82 |
      83 |   const handleToggleFilters = () => {
    > 84 |     LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
         |                                  ^
      85 |     setPostFiltersActive(!postFiltersActive);
      86 |   };
      87 |

我添加jest.mock('react-native')到我的 setup.js 文件中，但它开始抱怨我的测试套件的其余部分缺少其他实体......我是否必须模拟整个react-native库才能使其工作？

解决这个问题的最佳方法是什么？

我有一个需要使用的测试，navigator.mediaDevices但我无法让任何模拟正常工作。

我正在使用create-react-app.

这是我的测试：

import getConnectedDevices from "./getConnectedDevices";

describe("getConnectedDevices", () => {
  it("Should work", () => {
    console.log(navigator);              // Navigator {}
    console.log(navigator.mediaDevices); // undefined
  });
});

我尝试添加一个模拟，因为它在 jest 文档中说明

import getConnectedDevices from "./getConnectedDevices";

describe("getConnectedDevices", () => {
  it("Should work", () => {
    console.log(navigator);              // Navigator {}
    console.log(navigator.mediaDevices); // undefined
  });
});

import "../../tests/navigator.mock"; // <- Mock added

import getConnectedDevices from "./getConnectedDevices";

describe("getConnectedDevices", () => {
  it("Should work", () => {
    console.log(navigator);              // Navigator {}
    console.log(navigator.mediaDevices); // …