使用 React Native 的搜索栏答案

【问题标题】：Search Bar using React Native使用 React Native 的搜索栏
【发布时间】：2018-05-30 01:21:53
【问题描述】：

我正在尝试从react-native-searchbar 添加一个搜索栏来过滤列表，就像这样，但它会引发错误：

未定义代表。

我不知道我应该从这里做什么，抱歉，RN 的新手！数据来自流星应用。

class Flat_List extends Component{

  constructor(props){
    super(props);
    this._handleResults = this._handleResults.bind(this);
    this.state = { dataSource : { deputies } };
  }

    _handleResults(results){
    this.setState({dataSource: this.props.deputies(results)})
  }

   render(){
    const {deputies}= this.props; // the list is here

    return(
      <View>

        <SearchBar
          ref={(ref) => this.searchBar = ref}
          data={deputies}
          handleResults={this._handleResults.bind(this)}
          showOnLoad
          allDataOnEmptySearch
          hideBack
          autoCorrect= {false}
        />

        <List>
          <FlatList
            data={this.props.deputies}
            keyExtractor={(item)=> item._id}
            renderItem={({item})=>(
             <DeputyDetail deputy={item.depute} navigation={this.props.navigation} /> )} />
        </List>

      </View>
    );
  }
export default createContainer(params => {
  Meteor.subscribe('deputies');
  return { deputies: Meteor.collection('deputies').find() };
}, Flat_List);

【问题讨论】：

你能贴出Flat_List的父代码/它的调用站点吗？ props 没有定义，很可能你没有准确地传递它们，但是如果我们可以看到父组件，则更容易调试。
其实这是parent，数据来自export default createContainer(params=>{ Meteor.subscribe('deputies'); return{ deputies: Meteor.collection('deputies').find( ), }; },Flat_List);
好的，您首先要确保this.props.deputies 在render 被调用时到达。如果不是，则不会定义。这是你的第一步。您可以使用三元运算符this.props.deputies ? this.props.deputies : ["Data not arrived"] 添加对数据到达的检查 - 如果它没有到达，它将在render is called 时未定义。代码还有一些其他问题，但从那里开始！
好的，我会试试的。我应该把表达式放在 render() 之后，就像 this.props.deputies 一样吗？ this.props.deputies : ["数据未到达"] ?
是的，把它作为你的第一行放在render 和console.log 之后就出来了。

标签： reactjs meteor react-native react-native-flatlist

【解决方案1】：

您的状态声明无效。在您的构造函数（）中添加/编辑这些行：

const { deputies } = this.props;
this.state={
  dataSource: deputies
}

【讨论】：

它说“未定义代表”
您能告诉我们您是如何将deputies 传递到您的<Flat_List /> 组件中的吗？
我从这个组件将 RN 连接到 Meteor 应用程序，如下所示： export default createContainer(params => { Meteor.subscribe('deputies'); return { deputies: Meteor.collection('deputies'). find() }; }, Flat_List);

【解决方案2】：

constructor(props){

   super(props);
   this._handleResults = this._handleResults.bind(this);
   this.state={
      dataSource : {deputies} // Here -> You doesn't define deputies
   }
}

只在this.state之前添加这一行：

const { deputies } = props // You don't need 'this' because 'props' is already in the constructor params.

或者你可以直接放->this.state{ dataSource: props.deputies }

【讨论】：

也可以直接放-> this.state{ dataSource: props.deputies }
您确定要将此道具传递给此组件吗？