Javascript 数组筛选器不适用于状态

我有一个数组，它是一个状态，状态的值显示在一个视图中，我还有一个文本视图，我想让文本输入的值改变状态的值，这样状态视图中的值会改变，但它不会改变状态视图中的值， i、 e如果我键入

a

，视图不会改变，如果我键入

ab

，它会返回一个错误，说

undefined不是一个对象（评估项.toLowerCase）

请问我哪里可能错了

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>
    );
  }
}

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
学校：[
“Bauchi Abubakar Tafawa Balewa大学”，
“扎里亚艾哈迈杜贝洛大学”，
“卡诺巴约大学”，
],
};
this.handleChange=this.handleChange.bind（this）；
this.schoolChange=this.schoolChange.bind（this）；
}
学校变革（文本）{
for（设i=0；iitem.toLowerCase（item））；
让b=c.filter（item=>item.indexOf（text）>-1）；
设d=b.map（item=>item.toUpperCase（item））；
控制台日志（d）；
var len=d.长度；
for（设i=0；i({
学校：[…prevState.schools，row]，
}),
console.log（this.state.schools[i]），
);
}
}
手册更改（文本）{
this.setState（{text}，（）=>{
this.schoolChange（this.state.text）；
});
}
render（）{
const schools=this.state.schools.map（（学校，索引）=>(
{学校}
));
返回(
this.handleChange（text）}
/>
{学校}
);
}
}

这是因为您正在覆盖schools数组，而现在没有数据可供筛选。您的数据源是this.state.schools，在筛选器上，您正在用新数据替换schools数组，可能是空数组，因此现在您无法将数据返回筛选器。因此，不要将源数据保存在状态中，而是将其保存在一些全局变量或

this.schools

中，这样更新状态将不会更改源数据

保留一份数据副本。您不需要在循环中设置state。只需计算数据，然后设置状态

构造函数（道具）{
超级（道具）；
这是学校=[
“Bauchi Abubakar Tafawa Balewa大学”，
“扎里亚艾哈迈杜贝洛大学”，
巴约大学，卡诺
];
此.state={
学校：这是学校
}
this.handleChange=this.handleChange.bind（this）；
}
手册更改（文本）{
const schools=this.schools.filter（name=>name.toLowerCase（）.indexOf（text.toLowerCase（））>-1）；
本州（{schools}）；
}

这是因为您正在覆盖schools数组，而现在没有数据可供筛选。您的数据源是this.state.schools，在筛选器上，您正在用新数据替换schools数组，可能是空数组，因此现在您无法将数据返回筛选器。因此，不要将源数据保存在状态中，而是将其保存在一些全局变量或

this.schools

中，这样更新状态将不会更改源数据

保留一份数据副本。您不需要在循环中设置state。只需计算数据，然后设置状态

构造函数（道具）{
超级（道具）；
这是学校=[
“Bauchi Abubakar Tafawa Balewa大学”，
“扎里亚艾哈迈杜贝洛大学”，
巴约大学，卡诺
];
此.state={
学校：这是学校
}
this.handleChange=this.handleChange.bind（this）；
}
手册更改（文本）{
const schools=this.schools.filter（name=>name.toLowerCase（）.indexOf（text.toLowerCase（））>-1）；
本州（{schools}）；
}

您还可以简化学校更改功能：

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

---

您还可以简化学校变革功能：

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

---

undefinedI中的this.schools指的是您在构造函数中设置的答案。我刚刚注意到，您在回答中做了几乎相同的事情，只是没有在schoolChange中，而是在handleChange函数中。未定义中的this.schools指的是您的答案，您在构造函数中设置了它。我刚刚注意到你在回答中做了几乎相同的事情，只是不是在学校改变，而是在handleChange函数中。请你解释一下你说我凌驾于学校之上是什么意思array@AdokiyeIruene更新了我的答案，我希望现在清楚了，你能解释一下你说我凌驾于学校之上是什么意思吗array@AdokiyeIruene更新了我的答案，我希望现在答案清楚了