在React中更新数组 [英] Update Array in React

问题描述

在console.log中，我看到数组正在被更新，但它似乎并没有绑定到DOM。我有以下内容：

lockquote>

onKeyPress的输入，我有一个函数，推送到消息数组。

 < ul className =list-inline> 
 {message.map（function（message，key）{
 return（
 
）; 
}）} 
< / ul> 
  

更新我有以下（但没有运气）一些笔记。我正在使用Firebase侦听事件，并将其添加到数组中。想知道如果它的绑定问题？ -

  class React.Component {
 constructor（props，context）{
 super道具，背景）; 
 this.state = {messages：this.props.messages}; 
} 
 
 componentDidMount（）{
 const path ='/ comments / all'; 
 // Firebase观看新评论
 firebase 
 .database（）
 .ref（路径）
 .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（
< ul className =list-inline> 
 {messages.map（function（message，key）{
 
}）} 
< / ul> 
）; 
 
 
 
 $ div $解析方案

需要在组件 state 中设置消息。



  getInitialState（）{
 return {
 messages：[] 
} 
} 
  

然后在你的函数中设置状态：



  this.setState（{messages：updatedMessages}）
  



然后映射消息状态，或在 render 中映射消息变量：

  const messages = this.state.messages; 
 
 
< ul className =list-inline> 
 {messages.map（function（message，key）{
 etc ... 
  




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.

<ul className="list-inline">
  {messages.map(function(message, key){
    return (
      <li key={key} message={message}>{message}</li>
    );
  })}
</ul>

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 (
      <ul className="list-inline">
        {messages.map(function(message, key){
          <li key={key}>{message}</li>
        })}
      </ul>
    );
  }
}

解决方案

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;


<ul className="list-inline">
  {messages.map(function(message, key){
etc...

这篇关于在React中更新数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！