setState 不使用不可变渲染

Question

我有这个代码它的功能是搜索和过滤，数据来自this.props.allList，但它不起作用我认为错误是在状态但我不确定

// component.jsx 'use strict';

import React, {Component} from 'react';
import PureRenderMixin from 'react-addons-pure-render-mixin'; 
import Immutable from 'immutable';    


export default class ListComponent extends Component { 

 constructor(props) {
    super(props);
    this.state = { 
      allList: Immutable.List(),
      filteredData: Immutable.List(),
    };
    this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);

  }

  componentWillMount() {
    this.setState({ 
      allList: Immutable.fromJS(this.props.allList).toList(),
      filteredData: Immutable.fromJS(this.props.allList).toList() 
    });
  }

  filterData(event) {
    event.preventDefault();
    const regex = new RegExp(event.target.value, 'i');
    const filtered = this.state.allList.filter(function(datum) {
      return (datum.get('name').search(regex) > -1);
    });

    this.setState({
      filteredData: filtered,
    });
  }

  render() {
    const { filteredData } = this.state;
    const prettyRows = filteredData.map(function(datum) {
        return (
        <tr>
      <td>{ datum.get("status") }{datum.status}</td>
      <td>{ datum.get("count") }{datum.count}</td>
    </tr>
   );

    });
    return(
      <div>
        <input
          type="text"
          className="form-control"
          onChange={ this.filterData.bind(this) }
          placeholder="Search" />
        <table
          <thead>
          <tr>
              <th>id </th>
              <th>Name</th>
            </tr>
          </thead>

          <tbody>
            { prettyRows }
          </tbody>
       </table>
     </div>);
   }
 }

json

{
  "count": 3,
  "status": "SUCCESS",
  "tours": [
    {
       "title": "item 1",
    },
    {
       "title": "item 2",
    },
    {
       "title": "item 3",
    },

  ]
}

代码笔在这里：http://codepen.io/fernandooj/pen/WROpeg 感谢您的帮助

Answer 1

我在你的代码中注意到的第一件事是你正在使用 React.render,

React.render(<App />, document.getElementById('app'));

这应该是 ReactDOM.render React Docs
这是一个 codepen 代码的工作版本，没有 Immutable。
这是一个使用 Immutable 的 codepen。

备注：
只有List是一个不可变结构，而不是其中的对象，所以你不必使用datam.get('name')，datam.name有效。

"I need the states, to be able to do the crud, list, modify, eliminate" 我想你的意思是你想使用反应组件状态，以便在组件 ui 级别执行过滤，同时在商店中保持原始的完整选项（数据）列表？如果你的目标是保持最小的存储状态，你的数据流应该是这样的：
1. Action 在组件中调度 -> 必要时更新商店 ->
2. Reducer returnsstore的部分与相关信息 ->
3. Selector 对数据进行计算，returns filtered/reduced/computed 数据到视图。注意：Reselect 是一个很好的工具。

这有助于您将商店维护为 'single source of truth'，并保留您的组件 'dry'。

Answer 2

问题可能是由变量 prettyRows 引起的。问题可能是由于没有变量 datum.get("status"), or datum.status。

您能否提供更多信息，例如控制台中的错误？

Answer 3

你的反应包括错误： http://codepen.io/anon/pen/rjwwMq

删除“https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-with-addons.min.js” -> 这是与您用作核心的 React 0.13 不匹配的版本
评论 this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this); 因为那不再有效

薄纱

setState 不使用不可变渲染

setState not rendering with immutable

state

reactjs

immutable.js

redux