javascript - 无法在字符串上创建属性 'key'

Question

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

 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

我相信您拥有的是一个您正在尝试修改的不可变对象(immutable对象)。

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

A DataSnapshot is an efficiently generated, immutable copy of the data at a Database location. It cannot be modified and will never change (to modify data, you always call the set() method on a Reference directly).

尝试像这样将您的待办事项和键放入一个新对象中:

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