setState 不使用不可变渲染

Question

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

// 组件.jsx '使用严格';

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

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

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

   这应该是 ReactDOM.render React Docs

2. 这是一个 codepen，其中包含您的代码的工作版本，但不包含 Immutable。

3. 这是一个 codepen ，其工作不可变。

注意事项：
只有 List 是 Immutable 结构，而不是其中的对象，所以不必使用 datam.get('name')，datam.name 有效。

4. “我需要状态，以便能够进行粗加工、列出、修改、消除” 我认为您的意思是您想使用 react 组件状态，以便在组件 ui 级别执行过滤，同时在商店中保留原始完整的选项（数据）列表？如果您的目标是保持存储状态最小化，那么您的数据流应该如下所示：
   1. Action 在组件中调度 -> 必要时更新商店 ->
   2. Reducer 返回商店的部分 与相关信息 ->
   3. Selector 对数据进行计算并返回 过滤/减少/计算的数据到视图。 注意：Reselect 是一个很好的工具。

这有助于您将商店保持为“单一事实来源”，并保持组件“干燥”。

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);，因为那不再起作用了

等一下