javascript - Cannot create property 'key' on string - Stack Overflow

admin管理员组

文章数量:1391947

I am using firebase and react. I am mapping through the database trying to assign a key to each item. I've done this before and had no problems but for some reason, React doesn't like it. I using ponentDidMount to sync my app to firebase and this is where I'm grabbing each item and the unique key from firebase. Also, console.log gives me the correct key I want.

 ponentDidMount() {
       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 ) });
       });
     }

but when I map through the array and assign the key it throws the error : Cannot create property 'key' on string '

Here is how I am mapping:

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

I am using firebase and react. I am mapping through the database trying to assign a key to each item. I've done this before and had no problems but for some reason, React doesn't like it. I using ponentDidMount to sync my app to firebase and this is where I'm grabbing each item and the unique key from firebase. Also, console.log gives me the correct key I want.

 ponentDidMount() {
       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 ) });
       });
     }

but when I map through the array and assign the key it throws the error : Cannot create property 'key' on string '

Here is how I am mapping:

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

• javascript
• reactjs
• firebase
• firebase-realtime-database

Share Improve this question Follow edited Jun 30, 2018 at 13:46 Frank van Puffelen 601k8585 gold badges890890 silver badges860860 bronze badges asked Jun 29, 2018 at 18:00 Devon BurleyDevon Burley 6511 silver badge66 bronze badges 4

• What's the value of snapshot.val()? I would suspect it is a string, and trying to set a key on that string with todo.key = snapshot.key causes your error. – Tholle Commented Jun 29, 2018 at 18:02
• Not being entirely sure what todo is, why not create a new object containing todo and your key? – Chris Commented Jun 29, 2018 at 18:03
• I have one suggestion. Write like this ` let todo = []; todo['val'] = snapshot.val(); todo['key'] = snapshot.key;` and then use const listOfTodos = this.state.todos.map( (todo) => { return <li key={todo.key}>{todo.val}</li> }); – Aram Grigoryan Commented Jun 29, 2018 at 18:07
• @Tholle snapshot.val() returns each item from the firebase database as a string. – Devon Burley Commented Jun 29, 2018 at 18:17

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

I believe what you have is an immutable object which you're trying to modify.

https://firebase.google./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).

Try putting your todo and key into a new object like this:

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

本文标签： javascriptCannot create property 39key39 on stringStack Overflow