将值从地图传递到州

Question

//它现在正在运行 - 更新了代码

我正在处理自己的自动完成组件，因为我将firebase数据传递给现成的数据库时遇到问题。

整个机制运行良好但我在获取用户输入后传递值时遇到问题

我正在用这些值设置初始状态

const INITIAL_STATE = {
 allChars: [],
 suggestions: [],
 value: ""
};

然后在自动完成类中，我正在从数据库加载所有用户

loadData(){
 let self = this;
 let characters = firebase.firestore().collection("users");
 characters.get().then((querySnapshot) => {
 querySnapshot.forEach((doc) => {
    let document = doc.data();
    self.setState(({allChars})=>({
      allChars: [
        ...allChars,
        document
      ]        
    }))
  });
 });
}

这是我的getSuggestions函数。它在输入变化时触发

getSuggestions = event => {
 const {value, suggestions} = event.target;
 this.setState({
   value: value,
   suggestions: []
 })
 let suggest = [];

 this.state.allChars.map((allChars) => {
 if(value.length > 1 && allChars.name.toLowerCase().includes(value.toLowerCase())){
    suggest.push (
      allChars.name
    );
  }
 })
 this.setState({
  suggestions: suggest
 })
}

在渲染中我只是把{sugestions} 但是在{suggestions}中我只渲染了一个名字。 one 但当我控制它.log它 - 我得到两个名字two 应该有两个。

我尝试在loadData（）中设置此函数中的状态，但我仍然只获得一个值。 是否有其他方法可以将两个值都放入DOM中

完整的代码可以在这里找到：https://github.com/Ilierette/react-planner/blob/master/src/component/elements/Autocomplete.js

Answer 1

我认为你每次重新渲染组件时只看到一个元素的原因是你的allChars数组中的map函数，当你想要更新你所在状态的建议时，你每次都只设置一个名称作为一个新的数组，而你应该更新你所在州的现有数组，所以你的代码应该是：

this.setState({
    suggestions: [...this.state.suggestions, allChars.name]
})