使用React更新狀態

Question

我正在使用React，MongoDB，Express和Node創建一個博客。我有三個組件：應用程序，列表和項目。該項目是博客文章;該列表是博客帖子的列表，並且該應用程序包括輸入文本並提交它的地方。我最終會添加更多功能，但是我想確定我是否遵守React的最佳實踐（我懷疑自己是否）。

所以在應用程序中，我getInitialState與職位（職位）數組和輸入（postbody）的文本字符串。我使用componentDidMount向我的數據庫發出AJAX GET請求，以便用戶可以看到所有帖子。

要處理輸入文本，我只是做了一個簡單的handleChange函數，它更新postbody的狀態。

我也有一個handleClick函數，它抓取this.state.postbody，然後POST數據庫。然而，相同的函數也會使數據庫的單獨GET請求更新posts數組的狀態。這看起來不正確！不應該以其他方式處理並自動更新？ *這是我的主要問題。 *

另外，請讓我知道是否需要進一步拆分組件，或者如果我違反了使用React的最佳實踐（例如更改錯誤位置的狀態或錯誤地使用道具）。

var React = require('react'); 

var Item = React.createClass({ 
    render: function() { 
    return (
     <div> 
     <h2>{this.props.postbody}</h2> 
     </div> 
    ) 
    } 
}) 

var List = React.createClass({ 

    render: function() { 
    return (
     <div> 
     {this.props.array.map(function(post) { 

      return (
      <Item postbody={post.postbody}></Item> 
     ) 
     })} 
     </div> 
    ) 
    } 
}) 

var App = React.createClass({ 

    getInitialState: function() { 
    return { 
     posts: [], 
     postbody: '' 
    } 
    }, 

    componentDidMount: function() { 
    $.ajax({ 
     type: 'GET', 
     url: '/api/blogPosts', 
     success: function(data) { 
     this.setState({posts: data}); 
     }.bind(this) 
    }) 
    }, 

    handleClick: function() { 

    event.preventDefault(); 

    var blogPost = this.state.postbody; 

    $.ajax({ 

     type: 'POST', 
     url: '/api/blogPosts', 
     data: { postbody: blogPost } 
    }); 

    $.ajax({ 
     type: 'GET', 
     url: '/api/blogPosts', 
     success: function(data) { 
     this.setState({posts: data}); 
     }.bind(this) 
    }) 
    }, 

    handleChange: function(event) { 

    this.setState({ postbody: event.target.value}) 
    }, 

    render: function() { 
    return (
     <div> 
     <form action="/api/blogPosts" method="post"> 
      <input onChange={this.handleChange} type="text" name="postbody"></input> 
      <button type="button" onClick={this.handleClick}>Submit</button> 
     </form> 
     <List array={this.state.posts} /> 
     </div> 
    ) 
    } 
}) 

Answer 1

那麼，實際上，因爲你只有一個添加API調用，你可以這樣做。您只需將博客帖子推送到發佈請求中的帖子數組中。此外，您可能想使用表單的onSubmit。

var React = require('react'); 

var Item = React.createClass({ 
    render: function() { 
    return (
     <div> 
     <h2>{this.props.postbody}</h2> 
     </div> 
    ) 
    } 
}) 

var List = React.createClass({ 

    render: function() { 
    return (
     <div> 
     {this.props.array.map(function(post) { 

      return (
      <Item postbody={post.postbody}></Item> 
     ) 
     })} 
     </div> 
    ) 
    } 
}) 

var App = React.createClass({ 

    getInitialState: function() { 
    return { 
     posts: [], 
     postbody: '' 
    } 
    }, 

    componentDidMount: function() { 
    $.ajax({ 
     type: 'GET', 
     url: '/api/blogPosts', 
     success: function(data) { 
     this.setState({posts: data}); 
     }.bind(this) 
    }) 
    }, 

    handleSubmit: function() { 

    event.preventDefault(); 

    var blogPost = this.state.postbody; 

    $.ajax({ 

     type: 'POST', 
     url: '/api/blogPosts', 
     data: { postbody: blogPost }, 
     success:function(){ 
      this.setState({posts: Object.assign([],this.state.posts.push({postbody:postbody}))}); 
     }.bind(this) 
    }); 

    }, 

    handleChange: function(event) { 

    this.setState({ postbody: event.target.value}) 
    }, 

    render: function() { 
    return (
     <div> 
     <form action="/api/blogPosts" method="post" onSubmit={this.handleSubmit}> 
      <input onChange={this.handleChange} type="text" name="postbody"></input> 
      <input type="submit" value="Submit" >Submit</button> 
     </form> 
     <List array={this.state.posts} /> 
     </div> 
    ) 
    } 
}) 

這個想法是，你維護一個商店，它存在於組件之外，你通過各種事件/動作管理商店。在這種情況下，該應用程序相對比較簡單，所以我們可以承擔「存儲」作爲狀態支持並通過POST XHR進行更改。

但是，隨着您的應用程序邏輯不斷增加，請在商店中發佈帖子數據。並將商店中的CRUD數據動作。並且在商店中添加一個監聽器來發布對React組件的更新並使用狀態變量對其進行更新。

每當商店中發生某些變化時，使用監聽器（在商店，組件和API調用之間來回傳遞數據）和組件更新來更改商店內的狀態變量。這就是Flux的工作原理。還有其他方法可以做到這一點。只是一個開始。