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

Question

我正在使用firebase并做出反应.我正在通过数据库进行映射,尝试为每个项目分配一个键.我以前做过这个并且没有任何问题,但出于某种原因,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>
});

Answer 1

我相信你拥有的是一个你想要修改的不可变对象.

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

DataSnapshot是数据库位置上有效生成的,不可变的数据副本.它不能被修改,永远不会改变(修改数据,你总是直接在Reference上调用set()方法).

尝试将你的待办事项和密钥放入一个像这样的新对象:

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