使用Redux更新商店中嵌套数据数组的最佳/正确方法是什么？

我的商店看起来像这样：

{
    items:{
        1: {
            id: 1,
            key: "value",
            links: [
                {
                    id: 10001
                    data: "some more stuff"
                },
                ...
            ]
        },
        ...
    }
}

我有一对异步操作来更新完整的items对象，但是我还有另一对操作要更新特定的links数组。

我的减速器当前看起来像这样，但是我不确定这是否是正确的方法：

  switch (action.type) {
    case RESOURCE_TYPE_LINK_ADD_SUCCESS:
      // TODO: check whether the following is acceptable or should we create a new one?
      state.items[action.resourceTypeId].isSourceOf.push(action.resourceTypeLink);
      return Object.assign({}, state, {
        items: state.items,
      });
  }

我的所有jest typescript测试都在我的travis管道中失败，并抛出以下错误：

TypeError: Cannot assign to read only property 'Symbol(Symbol.toStringTag)' of object '#<process>'

突然发生了，我没有更改代码中的任何特定内容。 在本地，一切正常。

任何想法可能会发生什么？

我正在使用Redux，redux-router和reactjs。

我正在尝试制作一个用于获取路线更改信息的应用程序，因此，我会遇到以下问题：

<Route path="/" component={App}>
    <Route path="artist" component={ArtistApp} />
    <Route path="artist/:artistId" component={ArtistApp} />
</Route>

当有人输入artist/<artistId>时，我想搜索艺术家，然后呈现信息。 问题是，这样做的最佳方法是什么？

我已经找到了一些答案，可以使用RxJS或尝试使用中间件来管理请求。 现在，我的问题是，这真的必要吗？还是保持体系结构不可知的一种方法？ 我可以直接从react componentDidMount（）和componentDidUpdate（）获取我需要的信息吗？ 现在，我通过在那些请求信息的功能中触发一个动作来执行此操作，并且当信息到达时组件会重新渲染。 该组件具有一些让我知道的属性：

{
    isFetching: true,
    entity : {}
}

谢谢！

在React组件中，最好是在Constructor（）或componentWillMount（）中设置初始状态？

export default class MyComponent extends React.Component{
  constructor(props){
    super(props);
    this.setState({key: value});
  }
}

要么

export default class MyComponent extends React.Component{
  componentWillMount(props){
    this.setState({key: value});
  }
}

我有一个react组件（为了演示这个问题而简化了）：

class MyComponent extends Component {
    handleNameInput = (value) => {
        this.searchDish(value);
    };

    searchDish = (value) => {
      //Do something
    }

    render() {
        return(<div></div>)
    }
}

现在，我要测试 at XMLHttpRequest.open (node_modules/jsdom/lib/jsdom/living/xmlhttprequest.js:458:15) at run_xhr (node_modules/browser-request/index.js:215:7) at request (node_modules/browser-request/index.js:179:10) at DishAdmin._this.searchDish (src/main/react/components/DishAdmin.js:155:68) at DishAdmin._this.handleNameInput (src/main/react/components/DishAdmin.js:94:45) at Object.<anonymous> (src/main/react/tests/DishAdmin.test.js:122:24) 是否使用提供的值调用searchDish。

为了做到这一点，我想创建一个代替组件方法的笑话模拟函数。

到目前为止，这是我的测试用例：

it('handleNameInput', () => {
   let wrapper = shallow(<MyComponent/>);
   wrapper.searchDish = jest.fn();
   wrapper.instance().handleNameInput('BoB');
   expect(wrapper.searchDish).toBeCalledWith('BoB');
})

但是我在控制台中得到的只是 at XMLHttpRequest.open (node_modules/jsdom/lib/jsdom/living/xmlhttprequest.js:458:15) at run_xhr (node_modules/browser-request/index.js:215:7) at request (node_modules/browser-request/index.js:179:10) at DishAdmin._this.searchDish (src/main/react/components/DishAdmin.js:155:68) at DishAdmin._this.handleNameInput (src/main/react/components/DishAdmin.js:94:45) at Object.<anonymous> (src/main/react/tests/DishAdmin.test.js:122:24) ：

语法错误

  at XMLHttpRequest.open (node_modules/jsdom/lib/jsdom/living/xmlhttprequest.js:458:15)
  at run_xhr (node_modules/browser-request/index.js:215:7)
  at request (node_modules/browser-request/index.js:179:10)
  at DishAdmin._this.searchDish (src/main/react/components/DishAdmin.js:155:68)
  at DishAdmin._this.handleNameInput (src/main/react/components/DishAdmin.js:94:45)
  at Object.<anonymous> (src/main/react/tests/DishAdmin.test.js:122:24)

所以我的问题是，如何正确地用酶模拟组分方法？

我想在我的网站（使用React）上创建一个动态博客。 最初，我打算将原始HTML中的帖子存储在数据库中，并使用危险地设置内部HTML生成内容。 但是，我对安全隐患感到关注。 尽管我的应用程序没有任何敏感数据，但我对XSS并不十分熟悉，无法知道我可能会打开应用程序的所有危险。

我很好奇是否存在一种在我的应用程序中动态加载博客页面的高效，安全的方法。 在这种情况下，使用[https://github.com/odysseyscience/react-router-proxy-loader]有用吗？ 有一个与我的应用程序其余部分分开的博客文章JSX文件夹，并使用此文件夹加载（诚然，我不确定react-router-proxy-loader的工作方式）。

我愿意提出建议。

谢谢，

凯文

我开始用崇高的文字编写一些基本的React代码。 这是我的语法突出显示的样子。 其部分突出。 我可以使用任何建议的Sublime插件来查看完整的语法突出显示吗？

import React, { Component } from 'react'
import { connect } from 'react-redux'   // <-- is the glue between react and redux
import { bindActionCreators } from 'redux'
import { selectBook } from '../actions/index'

// there is no intrinsic connection between React and Redux
// they are two seperate libraries
// they are connected using a seperate library called ReactRedux

// container? its a React component that hasa direct connection to state managed by Redux
class BookList extends Component {

    constructor(props) {
        super(props)
        //this.props = props;
    }

    renderList() {
        return this.props.books.map((book) => {
            return (
                <li key={book.title} className="list-group-item">{book.title}</li>
            )
        })
    }

    render() {
        return (
            <ul className="list-group col-sm-4">
                {this.renderList()}
            </ul>
        )
    }

}

// function is the glue between react and redux
function mapStateToProps(state) {
    // Whatever gets retrieved from here will show up as props inside
    // of book-list

    return {
        books: state.books
    }
}

// anything returned from this function will end up as props on the BookList container
function mapDispatchToProps(dispatch) {
    return bindActionCreators({selectBook: selectBook}, dispatch)
}

// Promote BookList from a component to a container - it needs to know
// about this new dispatch method, selectBook. Make it available as a prop
export default connect(mapStateToProps, mapDispatchToProps)(BookList);

编辑：[修复了一些不正确的语法，添加了代码文本]

我在create-react-app中使用以下环境变量：

console.log(process.env.REACT_APP_API_URL) // http://localhost:5555

当我通过阅读npm run build文件运行package.json时，它可以工作：

REACT_APP_API_URL=http://localhost:5555

执行npm run build时如何设置不同的值，例如package.json？

这是我的package.json文件：

{
  "name": "webapp",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-scripts": "0.9.0"
  },
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

React中的CSS属性不会自动添加其供应商前缀。

例如，使用：

<div style={{
    transform: 'rotate(90deg)'
}}>Hello World</div>

在Safari中，不会应用旋转。

我该如何完成？

我想在我的react / react-router / flux应用程序中建立一个Facebook登录名。我在登录事件上注册了一个侦听器，并且希望将用户重定向到'/dashboard'（如果他们已登录）。该怎么办？ location.push效果不佳，除非完全重新加载了页面。

在开始组合Redux减速器之前，我的应用程序运行良好。 但是当我合并时，initialState和reducer键混合在一起了。

function flash(state = [], action) {
  switch (action.type) {
  case FLASH_MESSAGE_UPDATED:
    return _.extend({}, state, { flash: action.flash })
  default:
    return state
  }
}

function events(state = [], action) {
  switch (action.type) {
  case EVENTS_UPDATED:
    return _.extend({}, state, { events: action.pathway_events })
  default:
    return state
  }
}

export default combineReducers({
  events,
  flash
})

这会导致功能中断和控制台错误：

Unexpected keys "one", "two" found in initialState argument passed to createStore. Expected to find one of the known reducer keys instead: "events", "flash". Unexpected keys will be ignored.

我的初始状态是通过redux-thunk传递的。

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducer from '../../reducers/event'

let initialState = {
  one: globalData.one,
  two: globalData.two,
  events: globalData.events,
  flash: globalData.flash
}
let createStoreWithMiddleware = applyMiddleware(thunk)(createStore)
let reduxStore = createStoreWithMiddleware(reducer, initialState);

React.render(
  <Provider store={reduxStore}>
    <EventListContainer />
  </Provider>,
  $('.events')[0]
)

如何正确组合减速器？

我有一个状态数组，比如this.state.arr。我想向此状态属性添加一些内容，然后更改更多属性。

选项1

onChange(event){
    this.state.arr.push('newvalue');
    ...
    this.setState({some:'val',arr:this.state.arr})
}

选项2

onChange(event){
    var newArr = this.state.arr;
    ...
    newArr.push('newvalue');
    ...
    this.setState({some:'val',arr:newArr})
}

所以..我知道this.state应该被视为不可变的。 但是可以像在选项1中那样使用它还是可以设置状态的呢？还是我需要使用像选项2这样的东西，因此总是先在内存中进行复制

我建立了一个新的react项目，由于某种原因，没有调用componentDidMount方法。

我已通过在componentDidMount中拨打componentDidMount来验证此行为，但在控制台中看不到它的输出。

此外，componentDidMount无法正常工作。

关于为什么不致电componentDidMount，我感到很困惑。 我尝试同时使用React“ v0.14.0”和“ v0.14.3”。

为什么不调用“ componentDidMount”？

码：

var React = require('react');

var RecipePage = React.createClass({
  componentDidMount: function() {
    console.log('mounted!');
  },
  render: function() {
    return (
      <div>Random Page</div>
    );
  }
});

module.exports = RecipePage;

如果您将数组作为状态的一部分，并且该数组包含对象，那么通过更改其中一个对象来更新状态的简单方法是什么？

示例，从关于react的教程中修改而来：

var CommentBox = React.createClass({
  getInitialState: function() {
    return {data: [
      { id: 1, author: "john", text: "foo" },
      { id: 2, author: "bob", text: "bar" }
    ]};
  },
  handleCommentEdit: function(id, text) {
    var existingComment = this.state.data.filter({ function(c) { c.id == id; }).first();
    var updatedComments = ??; // not sure how to do this  

    this.setState({data: updatedComments});
  }
}

我有一个表单，我想在其中处理文本输入的更改事件，但是React onChange在按下按键时触发（与本机JS相反，当输入字段失焦时会触发更改事件）。

有React方式来做我想要的吗？

在以下示例中，当单击Item 2时，显示的是Second 1，而不是Second 2。为什么？ 您将如何解决？

var guid = 0;

class Content extends React.Component {
  constructor() {
    guid += 1;
    this.id = guid;
    console.log('ctor', this.id); // called only once with 1
  }
  render() {
    return (
      <div className="content">
        {this.props.title} - {this.id}
      </div>
    );
  }
}

class MyApp extends React.Component {
  constructor() {
    this.items = ['Item 1', 'Item 2'];
    this.state = {
      activeItem: this.items[0]
    };
  }
  onItemClick(item) {
    this.setState({
      activeItem: item
    });
  }
  renderMenu() {
    return (
      <div className="menu">
        <div onClick={this.onItemClick.bind(this, 'Item 1')}>Item 1</div>
        <div onClick={this.onItemClick.bind(this, 'Item 2')}>Item 2</div>
      </div>
    );
  }
  renderContent() {
    if (this.state.activeItem === 'Item 1') {
      return (
        <Content title="First" />
      );
    } else {
      return (
        <Content title="Second" />
      );
    }
  }
  render() {
    return (
      <div>
        {this.renderMenu()}
        {this.renderContent()}
      </div>
    );
  }
}

我想在一些嵌入式html中调用一个函数。 我尝试了以下操作，但未调用该函数。 这是在render方法中调用函数的错误方法吗？

import React, { Component, PropTypes } from 'react';

export default class PatientTable extends Component {
      constructor(props) {
        super(props);
        this.state = { 
         checking:false
      };
        this.renderIcon = this.renderIcon.bind(this);
  }

  renderIcon(){
    console.log("came here")
    return(
      <div>Function called</div>
    )
  }

  render() {

   return (
       <div className="patient-container">

       {this.renderIcon}      

      </div>
   );
 }
}

我是React的新手，正在尝试从外部文件导入JSON DATA变量。 我收到以下错误：

找不到模块“ ./customData.json”

有人可以帮我吗？ 如果我在index.js中具有我的DATA变量，则可以使用，但是当它位于外部JSON文件中时，它不可用。

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import customData from './customData.json';
import Profile from './components/profile';
import Hobbies from './components/hobbies';

class App extends Component {
  render() {
    return (
      <div>
        <Profile name={this.props.profileData.name}imgUrl={this.props.profileData.imgURL} />
        <Hobbies hobbyList={this.props.profileData.hobbyList}/>
      </div>
    );
  }
}

ReactDOM.render(<App profileData={DATA}/>, document.querySelector('.container'));

import React, {Component} from 'react';

var Hobbies = React.createClass({
  render: function(){
    var hobbies = this.props.hobbyList.map(function(hobby, index){
        return (<li key={index}>{hobby}</li>);
    });
    return (
        <div>
            <h5>My hobbies:</h5>
            <ul>
                {hobbies}
            </ul>
        </div>
    );
  } 
});

export default Hobbies;

import React from 'react';

var Profile = React.createClass({
render: function(){
    return (
        <div>
            <h3>{this.props.name}</h3>
            <img src={this.props.imgUrl} />
        </div>
    )
  }
});

export default Profile

var DATA = {    
    name: 'John Smith',
    imgURL: 'http://lorempixel.com/100/100/',
    hobbyList: ['coding', 'writing', 'skiing']
}

export default DATA

我已经弄清楚了如何使用事件的丑陋转换将事件处理程序绑定到SELECT元素上。

是否可以以类型安全的方式检索值而无需强制转换为任何值？

import React = require('react');

interface ITestState {
    selectedValue: string;
}

export class Test extends React.Component<{}, ITestState> {

    constructor() {
        super();
        this.state = { selectedValue: "A" };
    }

    change(event: React.FormEvent) {
        console.log("Test.change");
        console.log(event.target); // in chrome => <select class="form-control" id="searchType" data-reactid=".0.0.0.0.3.1">...</select>

        // Use cast to any works but is not type safe
        var unsafeSearchTypeValue = ((event.target) as any).value;

        console.log(unsafeSearchTypeValue); // in chrome => B

        this.setState({
            selectedValue: unsafeSearchTypeValue
        });
    }

    render() {
        return (
            <div>
                <label htmlFor="searchType">Safe</label>
                <select className="form-control" id="searchType" onChange={ e => this.change(e) } value={ this.state.selectedValue }>
                    <option value="A">A</option>
                    <option value="B">B</option>
                </select>
                <h1>{this.state.selectedValue}</h1>
            </div>
        );
    }
}

我有一个要在React中编写的函数。 在我的课堂上，我有一个状态对象immutability-helper，看起来像这样：

this.state = {
  step: 1,
  fields: {
    type: '',
    name: '',
    subtype: '',
    team: '',
    agreement: ''
  }
};

我具有使用immutability-helper分配这些键的各种功能，这些功能通常如下所示：

assignType(attribute) {
  var temp = update(this.state.fields, {
    type: {$set: attribute}
  });

  this.setState({
    fields: temp
  });
}

我想做的是使用更通用的函数并执行以下操作：

assignAttribute(field, attribute) {
  var temp = update(this.state.fields, {
    field: {$set: attribute}
  });

  this.setState({
    fields: temp
  });
}

但是，这不起作用。 如何使用immutability-helper使用可变键？