Reactjs setState不使用不可变的

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

//component.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>);
   }
 }

这里是代码笔： 谢谢你的帮助

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

React.render(

下面是一个示例，其中包含代码的工作版本，没有不可变的

这是一个不可变的工作模式

注：
只有列表是不可变的结构，而不是其中的对象，因此您不必使用datam.get（'name'），datam.name可以工作

“我需要州，以便能够进行crud、列出、修改和消除” 我认为您所说的是，您希望使用react组件状态，以便在组件ui级别执行过滤，同时保持存储中的原始完整选项列表（数据）？如果您的目标是保持存储状态最小，则您的数据流可能如下所示：

动作在组件中调度-> 如有必要，将更新存储->

Reducer返回存储区的部分 提供相关信息->

选择器对数据和返回执行计算 将过滤/减少/计算的数据添加到视图中。 注意：这是一个很好的工具

这有助于你保持你的商店作为“真理的单一来源”，并保持你的组件“干燥”

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

React.render(

下面是一个示例，其中包含代码的工作版本，没有不可变的

这是一个不可变的工作模式

注：
只有列表是不可变的结构，而不是其中的对象，因此您不必使用datam.get（'name'），datam.name可以工作

“我需要州，以便能够进行crud、列出、修改和消除” 我认为您所说的是，您希望使用react组件状态，以便在组件ui级别执行过滤，同时保持存储中的原始完整选项列表（数据）？如果您的目标是保持存储状态最小，则您的数据流可能如下所示：

动作在组件中调度-> 如有必要，将更新存储->

Reducer返回存储区的部分 提供相关信息->

选择器对数据和返回执行计算 将过滤/减少/计算的数据添加到视图中。 注意：这是一个很好的工具

---

这有助于将您的存储保持为“单一真实来源”，并保持组件“干燥”。

问题可能是由变量

prettyRows

引起的。问题可能是由于没有变量

datum.get（“status”）或datum.status

---

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

问题可能是由变量

prettyRows

引起的。问题可能是由于没有变量

datum.get（“状态”）或datum.status

造成的

---

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

您的反应包括错误：

• 删除“”->该版本与用作核心的react 0.13不匹配

• 注释

  this.shouldComponentUpdate=PureRenderMixin.shouldComponentUpdate.bind（this）；

  ，因为这不再有效

---

et voile

您的反应包括错误：

• 删除“”->该版本与用作核心的react 0.13不匹配

• 注释

  this.shouldComponentUpdate=PureRenderMixin.shouldComponentUpdate.bind（this）；

  ，因为这不再有效

---

et voile

这是您的代码的精确副本吗？如果是，则呈现方法中存在无法访问的代码。在声明

{filteredData}=this.state；

后，您有一个

返回（）

包装映射函数，使代码停止执行并返回该映射。作为要渲染的内容抱歉，我在此处渲染不好，并修改代码，但仍然无法渲染这是您的代码的精确副本？如果是，则在您的渲染方法中存在无法访问的代码。在您声明

{filteredData}=this.state；

您有一个

return（）

包装映射函数，以便代码停止执行并返回该映射。作为要渲染的内容抱歉，我在这里渲染不好，并修改了代码，但仍然没有渲染。为了您的帮助，如果我放置console.log（this.props.allList），我没有错误很好地为我提供了json，但在渲染时不起作用问题：如果在映射项中调用

{datum.status}

，为什么需要使用

{datum.get（“status”）}

？如果我没记错的话，data.status应该已经是值了。可以在datum下添加调试器或console.log来检查试图返回的值。感谢您的帮助，如果我将console.log（this.props.allList）放在很好地为我提供了json，但在渲染时不起作用问题：如果在映射项中调用

{datum.status}

，为什么需要使用

{datum.get（“status”）}

？如果我没记错的话，data.status应该已经是值了。也许可以在datum下添加一个调试器或console.log来检查试图返回的值。嗨，谢谢你的帮助：我认为这不是问题，我认为问题出在我将json放入状态时。嗨，谢谢你的回答，这实际上是我正在查找的例如，现在我有另一个问题，当我将它传递到我的测试环境时，我从redux获取数据，并将其保存在存储中，但这种方式对我不起作用，如果我加载console.log（this.Props.list），但是如果我加载console.log（this.state.lis）

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

  ]
}