无法在字符串上创建属性“key”

IT技术 javascript reactjs firebase firebase-realtime-database
2021-05-05 16:45:28

我正在使用 firebase 并做出react。我正在通过数据库进行映射,试图为每个项目分配一个键。我以前这样做过并且没有问题,但出于某种原因,React 不喜欢它。我使用 componentDidMount 将我的应用程序同步到 firebase,这是我从 firebase 获取每个项目和唯一键的地方。此外,console.log 为我提供了我想要的正确密钥。

 componentDidMount() {
       this.todosRef.on('child_added', snapshot => {
         const todo = snapshot.val();
         todo.key = snapshot.key;
         console.log(todo.key);
         this.setState({ todos: this.state.todos.concat( todo ) });
       });
     }

但是当我映射数组并分配键时,它会引发错误: Cannot create property 'key' on string '

这是我的映射方式:

const listOfTodos = this.state.todos.map( (todo) => {
    return <li key={todo.key}>{todo}</li>
});
1个回答

我相信你拥有的是一个你试图修改的不可变对象。

https://firebase.google.com/docs/reference/js/firebase.database.DataSnapshot

DataSnapshot 是在数据库位置高效生成的、不可变的数据副本。它不能被修改并且永远不会改变(要修改数据,你总是直接在引用上调用 set() 方法)。

尝试将您的 todo 和 key 放入一个新对象中,如下所示:

const todo = { key: snapshot.key, value: snapshot.val() }