錯誤而在陣列替換字符串反應狀態

Question

我有以下作用的代碼，它工作正常時可變日誌是字符串，即註釋的代碼，但只要我跟陣列代替原木我正在錯誤，

import React from "react"; 
export default class WelcomeComponent extends React.Component { 
constructor(props) { 
    super(props); 
    this.state = { 
     // logs :'' 
     logs: [] 
    }; 
} 
componentDidMount() { 
    var socket = io('http://localhost:11001'); 
    socket.on('news', (data) => { 
     data = JSON.parse(data); 
     this.setState({ 
      logs: this.state.logs.push(data) 
      // logs: data + this.state.logs 
     }); 
    }); 
} 
render() { 
    return (<div> {this.state.logs}</div>); 
} 
} 

原木作爲陣列它提供了下面的錯誤，

遺漏的類型錯誤：_this2.state.logs.push不是一個函數（...）

任何人都可以請幫助。

Answer 1

嘗試使用不變性方法：

socket.on('news', (data) => { 
     data = JSON.parse(data); 
     const newLogs = [...this.state.logs, data] 
     this.setState({ 
      logs: newLogs 
      // logs: data + this.state.logs 
     }); 
    }); 

Answer 2

您直接突變的成分，這是一個很大都能跟得上的狀態。嘗試React Immutability Helpers

import React from "react"; 
import update from 'react-addons-update'; 

export default class WelcomeComponent extends React.Component { 
constructor(props) { 
    super(props); 
    this.state = { 
     // logs :'' 
     logs: [] 
    }; 
} 
componentDidMount() { 
    var socket = io('http://localhost:11001'); 
    socket.on('news', (data) => { 
     data = JSON.parse(data); 
     this.setState({ 
      logs: update(this.state.logs, {$push: [data]}); 
     }); 
    }); 
} 
render() { 
    return (<div> {this.state.logs}</div>); 
} 
}