无法在字符串上创建属性“键”答案

【问题标题】：Cannot create property 'key' on string无法在字符串上创建属性“键”
【发布时间】：2018-12-08 23:16:20
【问题描述】：

我正在使用 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>
});

【问题讨论】：

snapshot.val() 的值是多少？我怀疑它是一个字符串，并尝试使用 todo.key = snapshot.key 在该字符串上设置一个键会导致您的错误。
不完全确定todo 是什么，为什么不创建一个包含todo 和您的key 的新对象？
我有一个建议。像这样写 `let todo = []; todo['val'] = 快照.val(); todo['key'] = snapshot.key;` 然后使用const listOfTodos = this.state.todos.map( (todo) => { return <li key={todo.key}>{todo.val}</li> });
@Tholle snapshot.val() 将 firebase 数据库中的每个项目作为字符串返回。

标签： javascript reactjs firebase firebase-realtime-database

【解决方案1】：

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

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

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

尝试将你的 todo 和 key 放入一个新对象中，如下所示：

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

【讨论】：

这会引发Objects are not valid as a React child 错误。
您使用 todo.val 作为 React 子级。这意味着todo.val是一个对象
我想我在想你会把这些值扔进一个有效的 React 组件中。
这确实有效。没有意识到打电话给{todo.value} 感谢@TomaszBubała。感谢两位的帮助！