Question

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

// component.jsx 'use strict';

'Connection Data.
Dim LoginData As String = "User ID=User;Password=Password;Initial Catalog=TestDB;Data Source=SQLServer"

'Connection Object.
Dim ConnectionObject As New SqlConnection(LoginData)
ConnectionObject.Open()

'Query.
Dim Query As New SqlCommand
Dim Reader As SqlDataReader
Dim Result As String

Query.CommandText = "SELECT PI_PatternVersion FROM dbo.tb_SystemPatternList WHERE PI_PatternType = 4"
Query.Connection = ConnectionObject
Reader= QuerySmartScan.ExecuteReader()
Result= Reader.Item("PI_PatternVersion")

MsgBox(Result)

json

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>);
   }
 }

这里是codepen：http://codepen.io/fernandooj/pen/WROpeg 谢谢你的帮助

Answer 1

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

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

这应该是 ReactDOM .render React Docs
这是一个codepen，其代码的工作版本没有不可变。
这是codepen，其中包含不可变的工作。

注释：
只有List是一个不可变的结构，而不是其中的对象，所以你不必使用datam.get（'name'），datam.name可以工作。

“我需要各州，能够做到这一点，列出，修改，消除” 我想你所说的是你想要使用react组件状态，以便在组件ui级别执行过滤，同时保持商店中原始的完整选项（数据）列表？如果您的目标是保持最小的存储状态，那么您的数据流应该如下所示：
1. 操作 - ＆gt; 如有必要，商店会更新 - ＆gt;
2. Reducer 会返回商店的部分内容以及相关信息 - ＆gt;
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” - ＆gt;这是与您使用的反应0.13版本不匹配的
评论this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);，因为它不再起作用

et voile

setState不使用immutable渲染

3 个答案: