时间戳

首页 > 解决方案 > 将值从地图传递到状态

javascript - 将值从地图传递到状态

问题描述

//现在可以工作了 - 更新了代码

我正在开发自己的自动完成组件，因为我在将 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} 中，我只渲染了一个名称。 一
但是当我 console.log 它时-我得到两个名字 二
应该有两个。

我试图在这个函数中设置状态，就像在 loadData() 中一样，但我仍然只得到一个值。
有没有其他方法可以将两个值都放入 DOM

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

标签： javascriptreactjs

解决方案

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

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

推荐阅读