Reactjs React本机过滤API平面列表

我正在构建我的第一个react本机应用程序，并将我的应用程序连接到一个可模拟的API

以前我有一个data.js文件，但最近想用一个实时API测试这个应用程序

现在我在通过API进行过滤时遇到了问题。在此之前，我将导入Data.JS文件，提取对象并将其置于我的状态。然后我将其设置为filteredObject

现在我用API替换了数据文件

我正在做一个测试

我所期待的：

undefined is not an object (evaluating 'row.restraunt.indexOf')

过滤我的公寓列表

我得到了什么：

undefined is not an object (evaluating 'row.restraunt.indexOf')

获取API

export default class FetchExample extends React.Component {

  static navigationOptions = {
        header: null,
    };
    constructor(props){
        super(props);
        this.state ={ 
      isLoading: true,
    }
    }

    componentDidMount(){
        return fetch('https://demo3381137.mockable.io/')
            .then((response) => response.json())
            .then((responseJson) => {

                this.setState({
                    isLoading: false,
                    dataSource: responseJson.restraunts,


                }, function(){

                });

            })
            .catch((error) =>{
                console.error(error);
            });
    }

setSearchText(event) {
    const searchText = event.nativeEvent.text;
    // const textLength = this.state.rows.length;

    const filteredTexts = this.state.dataSource.filter(row => {
      return row.restraunt.indexOf(searchText) !== -1;
        });
        console.log("text: " + JSON.stringify(filteredTexts));

    this.setState({ 
      searchText,
      filteredRows: filteredTexts
    });
    }

通过API过滤

export default class FetchExample extends React.Component {

  static navigationOptions = {
        header: null,
    };
    constructor(props){
        super(props);
        this.state ={ 
      isLoading: true,
    }
    }

    componentDidMount(){
        return fetch('https://demo3381137.mockable.io/')
            .then((response) => response.json())
            .then((responseJson) => {

                this.setState({
                    isLoading: false,
                    dataSource: responseJson.restraunts,


                }, function(){

                });

            })
            .catch((error) =>{
                console.error(error);
            });
    }

setSearchText(event) {
    const searchText = event.nativeEvent.text;
    // const textLength = this.state.rows.length;

    const filteredTexts = this.state.dataSource.filter(row => {
      return row.restraunt.indexOf(searchText) !== -1;
        });
        console.log("text: " + JSON.stringify(filteredTexts));

    this.setState({ 
      searchText,
      filteredRows: filteredTexts
    });
    }

列出组件

    renderRow = (rowData) => { 
    return (
        <View>
          <Text>
                        {rowData.item.restraunt}, {rowData.item.type}
          </Text>
        </View>
    )
  }

render() {

        if(this.state.isLoading){
            return(
                <View style={styles.loading}>
                    <ActivityIndicator/>
                </View>
            )
        }

    return (

        <View style={styles.container}>
      {console.log(this.state.dataSource)} 
            <View style={styles.SearchBarContainer}> 
                    <TextInput
                    placeholder="Search"
                  value={this.state.searchText}
                  onChange={this.setSearchText.bind(this)}
                  style={styles.searchBar}
                  underlineColorAndroid="black"
                  selectionColor="black"
                />
                </View>
        <FlatList
          style={styles.listContainer}
          data={this.state.dataSource}
          renderItem={this.renderRow}
          keyExtractor={(item, index) => index.toString()}
        />
      </View>   
    )
  }

renderRow=（rowData）=>{
返回(
{rowData.item.restarun}，{rowData.item.type}
)
}

呈现平面列表

    renderRow = (rowData) => { 
    return (
        <View>
          <Text>
                        {rowData.item.restraunt}, {rowData.item.type}
          </Text>
        </View>
    )
  }

render() {

        if(this.state.isLoading){
            return(
                <View style={styles.loading}>
                    <ActivityIndicator/>
                </View>
            )
        }

    return (

        <View style={styles.container}>
      {console.log(this.state.dataSource)} 
            <View style={styles.SearchBarContainer}> 
                    <TextInput
                    placeholder="Search"
                  value={this.state.searchText}
                  onChange={this.setSearchText.bind(this)}
                  style={styles.searchBar}
                  underlineColorAndroid="black"
                  selectionColor="black"
                />
                </View>
        <FlatList
          style={styles.listContainer}
          data={this.state.dataSource}
          renderItem={this.renderRow}
          keyExtractor={(item, index) => index.toString()}
        />
      </View>   
    )
  }

render（）{
if（此.state.isLoading）{
返回(
)
}
返回(
{console.log（this.state.dataSource）}
index.toString（）}
/>
)
}

看起来不一致；对于某些行，

餐厅

不存在

考虑像这样修改

setSearchText（）

方法，以考虑不包括

restrant

字符串字段的

row

项：

setSearchText(event) {

    const searchText = event.nativeEvent.text;    

    const filteredTexts = this.state.dataSource.filter(row => {

      /* If row.restraunt is present as a string, and includes searchText */
      return (typeof row.restraunt === 'string') &&
              row.restraunt.includes(searchText) 
    });

    this.setState({ 
        searchText,
        filteredRows: filteredTexts
    });
}

还请注意here的用法，您可以找到一种更简洁的方法来替代这种过滤行为。希望有帮助

更新 另外，要使筛选生效，请记住将

上的

数据
属性更新到您的状态
过滤器窗口
字段，而不是
数据源
。最后，请记住过滤也是区分大小写的

更新2
要实现所需的过滤行为，可以对组件进行以下调整：

  componentDidMount(){
    return fetch('https://demo3381137.mockable.io/')
    .then((response) => response.json())
    .then((responseJson) => {

        this.setState({
            isLoading: false,
            /* Keep this, we'll base filtering on this data set */
            dataSource: responseJson.restraunts,
            /* Add this, to track what is presented to the user */
            viewSource: responseJson.restraunts, 
        }, function(){

        });

    })
    .catch((error) =>{
        console.error(error);
    });
}


谢谢你的回复。使用您的方法时，
FlatList
在我搜索行之前是空的。我希望隔离
数据源
并将该数据添加到API
this.state
中的
filteredRows:dataSource
函数中的
filteredRows:dataSource
，但是如果我理解正确，它返回的结果是
dataSource not found
欢迎：-），您希望所有的
餐厅
数据在默认情况下都列出并可见，然后只有在搜索字段中提供搜索字符串时，筛选才会生效？这是正确的。这就是它使用data.js文件的方式耶` viewSource:responseJson.restraunts，`帮助！谢谢不确定如何添加第二个变量。