javascript - Array filter not working for state - Stack Overflow

admin管理员组

文章数量:1414908

I have an array which is a state, The values of the state show in a view, I also have a text view, I want to make the value of the text input change the values of the state so that the values in the state view will change, but it doesn't change the values in the state view, i.e if i type a, the view doesn't change, if i type ab it es back with an error saying undefined is not an object(evaluating item.toLowerCase) Please where may I may be wrong

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      schools: [
        "Abubakar Tafawa Balewa University, Bauchi",
        "Ahmadu Bello University, Zaria",
        "Bayero University, Kano",
      ],
    };
    this.handleChange = this.handleChange.bind(this);
    this.schoolChange = this.schoolChange.bind(this);
  }

  schoolChange(text) {
    for (let i = 0; i < this.state.schools.length; i++) {
      console.log(this.state.schools[i]);
    }
    let c = this.state.schools.map(item => item.toLowerCase(item));
    let b = c.filter(item => item.indexOf(text) > -1);
    let d = b.map(item => item.toUpperCase(item));
    console.log(d);
    var len = d.length;
    for (let i = 0; i < len; i++) {
      let row = d[i];
      this.setState(
        prevState => ({
          schools: [...prevState.schools, row],
        }),
        console.log(this.state.schools[i]),
      );
    }
  }

  handleChange(text) {
    this.setState({ text }, () => {
      this.schoolChange(this.state.text);
    });
  }

  render() {
    const schools = this.state.schools.map((school, index) => (
      <Text style={styles.text}>{school}</Text>
    ));

    return (
      <View>
        <TextInput
          placeholder="Search"
          value={this.state.text}
          onChangeText={text => this.handleChange(text)}
        />
        <ScrollView overScrollMode={"never"} keyboardShouldPersistTaps="always">
          {schools}
        </ScrollView>
      </View>
    );
  }
}

I have an array which is a state, The values of the state show in a view, I also have a text view, I want to make the value of the text input change the values of the state so that the values in the state view will change, but it doesn't change the values in the state view, i.e if i type a, the view doesn't change, if i type ab it es back with an error saying undefined is not an object(evaluating item.toLowerCase) Please where may I may be wrong

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      schools: [
        "Abubakar Tafawa Balewa University, Bauchi",
        "Ahmadu Bello University, Zaria",
        "Bayero University, Kano",
      ],
    };
    this.handleChange = this.handleChange.bind(this);
    this.schoolChange = this.schoolChange.bind(this);
  }

  schoolChange(text) {
    for (let i = 0; i < this.state.schools.length; i++) {
      console.log(this.state.schools[i]);
    }
    let c = this.state.schools.map(item => item.toLowerCase(item));
    let b = c.filter(item => item.indexOf(text) > -1);
    let d = b.map(item => item.toUpperCase(item));
    console.log(d);
    var len = d.length;
    for (let i = 0; i < len; i++) {
      let row = d[i];
      this.setState(
        prevState => ({
          schools: [...prevState.schools, row],
        }),
        console.log(this.state.schools[i]),
      );
    }
  }

  handleChange(text) {
    this.setState({ text }, () => {
      this.schoolChange(this.state.text);
    });
  }

  render() {
    const schools = this.state.schools.map((school, index) => (
      <Text style={styles.text}>{school}</Text>
    ));

    return (
      <View>
        <TextInput
          placeholder="Search"
          value={this.state.text}
          onChangeText={text => this.handleChange(text)}
        />
        <ScrollView overScrollMode={"never"} keyboardShouldPersistTaps="always">
          {schools}
        </ScrollView>
      </View>
    );
  }
}

• javascript
• reactjs
• react-native

Share Improve this question Follow edited Aug 17, 2018 at 22:26 devserkan 17.7k44 gold badges3333 silver badges4848 bronze badges asked Aug 17, 2018 at 22:15 Adokiye IrueneAdokiye Iruene 88033 gold badges1414 silver badges3535 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

It is because you are overriding schools array and now there is no data to filter on. Your source of data is this.state.schools and on filter, you are replacing schools array with new data, maybe empty array so now you don't have a way to get your data back to filter. So instead of keping your source data in state, keep it in some global variables or in this.schools so updating state will not change the source

Keep a copy of data. YOu don't need to setState in loop. SImply calculate data and then setState.

constructor(props) {
    super(props);
        this.schools = [
                   "Abubakar Tafawa Balewa University, Bauchi",
                   "Ahmadu Bello University, Zaria",
                   "Bayero University, Kano"
                ];
        this.state = {
                schools: this.schools
        }

    this.handleChange = this.handleChange.bind(this);
}
  
 handleChange(text){
     const schools = this.schools.filter(name => name.toLowerCase().indexOf(text.toLowerCase()) > -1);
     this.setState({ schools });
 }

You could also simplify your schoolChange function:

schoolChange(text){
     const schools = this.schools.filter(school => school.toUpperCase().includes(text.toUpperCase()));
     this.setState({
       schools,
     });
 }

本文标签： javascriptArray filter not working for stateStack Overflow