警告：失败的propType：未指定所需的道具`children`

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 返回并打印到屏幕上，这没关系，但是如果我想用他的属性打印hello 呢？如您所见，是“问候”吗？

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

警告：propType 失败：Row 中未指定必需的 prop children。检查UniversalSearch的渲染方法。

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

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

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

这比 Angular 中的要多得多，但是您现在有了单向的数据流（注意自上而下的方法，数据从 inn <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()ing 而不是.filter()ing。您正在为新对象的映射返回 null，而不是删除值。