Question

我正在尝试为我的应用程序执行搜索功能，这是我的第一个React应用程序并且没有看到优势

这里我有这段代码

let falsyData = [
    {'hello': 'greet'},
    {'Travel': 'traveling'},
    {'Heart': 'corazon'},
    {'Earth': 'tierra'},
    {'Hills': 'a name'},
    {'Blackjack': 'game'},
    {'Casino': 'gambling'}
  ];

class UniversalSearch extends Component {

  constructor() {
    super();
    this.state = {value : '', result: ''};
  } 

  render () {
    let searchRes = this._matchPeople(this.state.value),
        match = searchRes.map(function(item) {
          return <Column><Paper>{item}</Paper></Column>;
        });
    return (
      <Grid>
        <Row>
          <Column>
            <TextField onChange={this._onChange.bind(this)}
                    onKeyUp={this._changeInput.bind(this)} value={this.state.value} />
            {!!this.state.value.length &&
              <Row>
                {match}                
              </Row>
            }
          </Column>
        </Row>
      </Grid>
    );
  }

  _matchPeople = (input) => {
    let reg = new RegExp(input.split('').join('\\w*').replace(/\W/, ""), 'i');
    return falsyData.map(function(person) {
      for (let key in person) {
        if (key.match(reg)) {          
          return key;
        }
      }
    });
  }

  _changeInput = (val) => {
    let autoCompleteResult = this._matchPeople(this.state.value);    
    if (autoCompleteResult.length) {
      this.setState({result: autoCompleteResult.join(' ')});
    };
  }

  _onChange = (event) => {
    this.setState({value: event.target.value});
  }  

}

我需要通过falsyData数组进行搜索，到目前为止我正在实现搜索的功能

  _matchPeople = (input) => {
    let reg = new RegExp(input.split('').join('\\w*').replace(/\W/, ""), 'i');
    return falsyData.map(function(person) {
      for (let key in person) {
        if (key.match(reg)) {          
          return key;
        }
      }
    });
  }

  _changeInput = (val) => {
    let autoCompleteResult = this._matchPeople(this.state.value);    
    if (autoCompleteResult.length) {
      this.setState({result: autoCompleteResult.join(' ')});
    };
  }

  _onChange = (event) => {
    this.setState({value: event.target.value});
  }

我的应用程序正在返回我正在搜索的falsyData条件，但只返回属性而不返回属性，因此，我应该如何访问这些属性？

例如：如果我输入hello，hello字词应该从falsyData返回并打印到屏幕上，这没关系，但如果我想要打印{怎么办？ {1}}他的属性是“迎接”＃39;如你所见？

而且，我收到了这个错误：

警告：propType失败：hello中未指定必需的道具children。检查Row的呈现方法。

我不认识你们，但是我在过去的3个小时里一直在使用它，而Angular只需要UniversalSearch，就是这样。

如果有人可以提供帮助，请提前致谢。

Answer 1

你有几个问题，你的代码似乎有点复杂。也许你应该尝试简化它？

我会回答这个问题：

我不认识你们，但是我在过去的3个小时里一直都是这样，使用Angular只需要| filter:，就是这样。

如果您只需要过滤列表，则应执行以下操作：

// functional component without state
const FilteredList = ({things, filter}) => {
  const filtered = things.filter(t => t.search(filter) !== -1)
    return (
    <ul>
      {filtered.map(t => <li>{t}</li>)}
    </ul>
    )
}

class App extends React.Component {
  constructor ({things}) {
    super()
    this.state = {}
    this.state.things = things.split(', ')
    this.state.filter = ''
  }
  handleChange (event) {
    this.setState({filter: event.target.value})
  }
  render () {
    const things = this.state.things  // shorthands
    const filter = this.state.filter
    return (
        <div>
        <input onChange={this.handleChange.bind(this)} />
        <FilteredList things={things} filter={filter} />
      </div>
    )
  }
}

ReactDOM.render(
  <App things="asdf, lorem, and, more" />,
  document.getElementById('container')
);

jsfiddle

这比角度更多，但你现在有一个单向的数据流（注意自上而下的方法，数据从旅馆<App>开始，然后给孩子们）。这提供了一些额外的好处，比如“更容易”推理应用中的数据。

另请注意，除了JSX和一对{}之外，这是 plain JavaScript。您不需要知道任何特殊的| filter或ng-repeat或ng-if，还是ng-show？

编辑： Warning: Failed propType: Required prop children was not specified in Row. Check the render method of UniversalSearch.可能是

<Row>
  {match}                
</Row>

此处{match}为空。

Answer 2

您.map()而不是.filter()。您将为新对象的地图返回null，而不是删除值。

警告：propType失败：

2 个答案: