react 合并数组_在React中更新数组

I am coming from Angular 1.x and looking to update an unordered list with React / Redux.

In console.log, I am seeing the array being updated, but it doesn't seem to bind to the DOM. I have the following --

onKeyPress of an input, I have a function that pushes to messages array.

{messages.map(function(message, key){

return (

{message}

);

})}

Update

I have the following (but no luck yet) Some notes. I am using Firebase to listen for events, and add to an array. Wondering if its a bind issue? --

class Comments extends React.Component {

constructor(props, context) {

super(props, context);

this.state = {messages: this.props.messages};

}

componentDidMount() {

const path = '/comments/all';

// Firebase watches for new comments

firebase

.database()

.ref(path)

.on('child_added', (dataSnapshot) => {

this.state.messages.push(dataSnapshot.val());

this.setState({

messages: this.state.messages

});

//console.log(dataSnapshot.val());

});

}

render() {

const messages = this.state.messages;

return (

{messages.map(function(message, key){

{message}

})}

);

}

}

解决方案

You need messages to be set in the components state.

getInitialState() {

return {

messages: []

}

}

Then in your function, set the state:

this.setState({messages: updatedMessages})

and then map over the messages state, or a messages variable in render:

const messages = this.state.messages;

{messages.map(function(message, key){

etc...