的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", 
    }, 

    ] 
} 

這裏codepen：http://codepen.io/fernandooj/pen/WROpeg 感謝您的幫助

Answer 1

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

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

   這應該是ReactDOM .render React Docs

2. 這裏是你的代碼沒有不可改變的工作版本codepen。

3. 這裏是一個codepen與永恆的工作。

筆記：
只有列表是不可變的結構，而不是其中的對象，這樣你就不必使用datam.get（「名稱」），datam.name作品。

1. 「我需要的狀態，能夠做到crud，列表，修改，消除」我認爲你所說的是你想使用反應組件狀態所以過濾是在組件ui級別執行的，同時保持存儲中選項（數據）的原始完整列表？如果你的目標是保持店內的狀態最少的，您的數據流可能應該是這樣的：
   1. 行動在組件調度 - > 商店是在必要時更新 - >
   2. 減速返回的部分商店 與相關信息 - >
   3. 選擇器對數據執行計算，並返回 過濾/減少/計算的數據到視圖。 說明：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」 - >是與反應0.13你正在使用的核心

• 評論this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);因爲不工作的版本不匹配

et waile