停止從刪除Firebase狀態對象中刪除React應用程序項目

我正在開發一款應用程序以學習React，用戶可以通過該應用程序記錄他們的月收入，賬單和交易。國傢俱有3個嵌套對象（income: {}, expenditure: {}, transactions: {}）停止從刪除Firebase狀態對象中刪除React應用程序項目

getInitialState() { 
    return { 
     cashbook: { 
     expenditure: {}, 
     income: {}, 
     transactions: {} 
     } 
    } 
    }

我是有很好的工作，基於在火力地堡被定義每個對象上調用cashbook的對象。我現在正在嘗試使其工作，以便應用程序仍然可以與Firebase一起使用，而不會定義所有對象。（我正在描述這件事，不是嗎？）。因此，假設用戶在狀態中的每個對象中都有數據，然後從Expenditure中刪除所有數據，應用程序錯誤是因爲它試圖從Expenditure狀態對象中輸出數據，但是刪除所有項目會完全刪除Firebase中的對象，並且所以App狀態。（我用泰勒麥金尼斯重訂（https://github.com/tylermcginnis/re-base）

以下是應用程序的渲染，componentDidMount和支出的渲染方法，這可能更好地解釋它。

（錯誤涉及到這條線在Expenditure陣營類：{Object.keys(this.props.cashbook).map(this.renderExpenditure)}和錯誤讀取：

Uncaught TypeError: Cannot convert undefined or null to object

const App = React.createClass({ 
    getInitialState() { 
    return { 
     cashbook: { 
     expenditure: {}, 
     income: {}, 
     transactions: {} 
     } 
    } 
    }, 
    componentDidMount() { 
    base.syncState('cashbook', { 
     context: this, 
     state: 'cashbook' 
    }); 
    }, 
    removeCashflow(key, type) { 
    this.state.cashbook[type][key] = null; 
    this.setState({ 
     cashbook: { [type]: this.state.cashbook[type] } 
    }); 
    }, 
    render() { 

    return(
     <div className="cashbook"> 

     <a className="button" onClick={this.LoadSampleData}>Load Sample Data</a> 
     <Expenditure 
       cashbook={this.state.cashbook.expenditure} 
       removeCashflow={this.removeCashflow} /> 
     </div> 
    ); 
    } 
});

與支出：

const Expenditure = React.createClass({ 
    renderExpenditure(key) { 
    const details = this.props.cashbook[key]; 
    return(
     <tr className="item" key={key}> 
     <td><strong>{details.name}</strong></td> 
     <td><strong>{h.formatPrice(details.amount)}</strong></td> 
     <td>{details.category}</td> 
     <td>{details.type}</td> 
     <td>{details.date}</td> 
     <td><button className="remove-item" onClick={this.props.removeCashflow.bind(null, key, 'expenditure')}>Remove</button></td> 
     </tr> 
    ); 
    }, 
    render() { 
    return(
     <div className="expenditure"> 
     <table id="exp-table"> 
      <tbody> 
      {Object.keys(this.props.cashbook).map(this.renderExpenditure)} 
      </tbody> 
     </table> 
     </div> 
    ); 
    } 
});

來源

2016-01-27 zeKoko

排序 - 我最終使用：

{Object.keys(this.props.cashbook || {}).map(this.renderExpenditure)}

這確保瞭如果沒有在現金簿對象，使用空對象。

來源

2016-02-02 20:31:01 zeKoko

停止從刪除Firebase狀態對象中刪除React應用程序項目

回答

相關問題