小编Raj*_* Rj的帖子

我最近从Angular搬到了ReactJs.我正在使用jQuery进行API调用.我有一个API,它返回一个要在列表中打印的随机用户列表.

我不知道如何编写我的API调用.这是什么最佳做法？

我尝试了以下但我没有得到任何输出.如有必要,我愿意实现替代API库.

以下是我的代码:

import React from 'react';

export default class UserList extends React.Component {    
  constructor(props) {
    super(props);
    this.state = {
      person: []
    };
  }

  UserList(){
    return $.getJSON('https://randomuser.me/api/')
    .then(function(data) {
      return data.results;
    });
  }

  render() {
    this.UserList().then(function(res){
      this.state = {person: res};
    });
    return (
      <div id="layout-content" className="layout-content-wrapper">
        <div className="panel-list">
          {this.state.person.map((item, i) =>{
            return(
              <h1>{item.name.first}</h1>
              <span>{item.cell}, {item.email}</span>
            )
          })}
        <div>
      </div>
    )
  }
}

我必须显示包含大量数据的表格.有一个分页按钮,每页显示10条记录.我有一个名为"FETCH"的按钮点击它表填充.如何在页面加载时加载我的表.

action.js

import fetch from 'isomorphic-fetch';
export const ADD_BENEFICIARY = 'ADD_BENEFICIARY';
export const REMOVE_BENEFICIARY = 'REMOVE_BENEFICIARY';

export const ADD_PLAN_TO_COMPARE = 'ADD_PLAN_COMPARE';
export const REMOVE_PLAN_FROM_COMPARE = 'REMOVE_PLAN_COMPARE';
export const SHOW_PLAN_COMPARE = 'SHOW_PLAN_COMPARE';

export const NEXT_PAGE_PLAN_LIST = 'NEXT_PAGE_PLAN_LIST';
export const PREV_PAGE_PLAN_LIST = 'PREV_PAGE_PLAN_LIST';
export const REQUEST_PAGE_PLAN_LIST = 'REQUEST_PAGE_PLAN_LIST';
export const RECEIVE_PAGE_PLAN_LIST = 'RECEIVE_PAGE_PLAN_LIST';

export const showNextPageOfPlans = () => {

  return {
    type: NEXT_PAGE_PLAN_LIST
  }
}

export const showPreviousPageOfPlans = () => {

  return {
    type: PREV_PAGE_PLAN_LIST
  }
}

export const requestPageOfPlans …

我想使用spread运算符.场景是没有玩家(在UI上显示为玩家牌).每当我点击任何播放器磁贴时,它就会变为活动状态(突出显示).条件是一次只能突出显示一个玩家.所以,当一个球员瓦片被点击它的属性ifActive: true,和其他玩家属性ifActive: false 将playerReducer越来越点击玩家ID为action.payload(action.payload所赐这是目前点击播放器的ID).现在我必须修改我state而不改变它.我必须使用spread运算符.如何使用spread运算符修改索引处的特定对象？

const initialPlayerState = {
  tabs: [
    { id: 1, name: 'player 1', ifActive: false },
    { id: 2, name: 'player 2', ifActive: false },
    { id: 3, name: 'player 3', ifActive: false },
  ]
} 
const playerReducer = (state = initialPlayerState , action) => {
    switch (action.type) {
        case SELECT_PLAYER:
          //how to modify state using spread operator, and how to modify 
          //a specific object at …

我必须为PlayerList容器和Player组件编写单元测试用例.为分支和道具编写测试用例是可以的,但是如何测试组件的方法及其中的逻辑.我的代码覆盖率不完整,因为没有测试方法.

场景:

父组件将对其方法的引用onSelect作为对子组件的回调传递.该方法在PlayerList组件中定义,但Player正在生成调用它的onClick事件.

父组件/容器:

import React, { Component } from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {selectTab} from '../actions/index';
import Player from './Player';

class PlayerList extends Component {    
    constructor(props){
        super(props);
    }

    onSelect(i) {
        if (!i) {
            this.props.selectPlayer(1);
        }
        else {
            this.props.selectPlayer(i);
        }
    }

    createListItems(){      
        return this.props.playerList.map((item, i)=>{
            return (                
                    <Player key={i} tab={item} onSelect={() => this.onSelect(item.id)} />
                )
        });
    }

    render() {
        return(
            <div className="col-md-12">
                <ul className="nav …

如果在同一个函数中重新声明和定义了相同的全局变量，为什么这个全局变量在函数中未定义？

var a = 1;
function testscope(){
 console.log(a, 'inside func');
 //var a=2;
};
testscope();
console.log(a, 'outside func');

output:
1 "inside func"
1 "outside func" 

考虑相同的代码，其中 var a = 2; 内部功能块未注释

var a = 1;
function testscope(){
 console.log(a, 'inside func');
 var a=2; 
};
testscope();
console.log(a, 'outside func');

Output
undefined "inside func"
1 "outside func"