反應將數據發送到父組件

Question

我從API中加載subcomponent分頁消息，並將jsonData發送到父component以處理向UI顯示消息。 我用下面的代碼成功實現了這個，但我被告知我的設計和數據傳遞是有問題的 - 特別是在我的MoreMessages組件中。

有人看到我的嘗試有什么問題嗎？

MoreMessages.js

/ *在子組件中，我只是渲染一個按鈕，當它被單擊時，我獲取消息並使用self.props.setMessages(jsonData) * /將數據發送到父組件

export default class MoreMessages extends React.Component {
  constructor() {
    super()
    this.state = {
      pages: 1
    }
  }

  handleClick() {
    var self = this

    this.setState({ pages: this.state.pages+1 }, () => {
      var url = process.env.URL+'?page='+this.state.pages
      const fetchMessages = fetch(url, {credentials: 'same-origin'})

      function loadMyMessages(data) {
        data.json().then((jsonData) => {
          console.log("Sending the jsonData to props in Layout component");
          self.props.setMessages(jsonData)
        })
      }

      fetchMessages.then(loadMyMessages)
    });
  }

  render() {
    return (
      <div id="more-messages">
        <button onClick={this.handleClick.bind(this)}>More Messages</button>
      </div>
    )
  }
}

Layout.js

/ *然后只需使用setMessages方法將數據傳遞給父組件，該方法更新消息狀態，MessageList組件更新UI * /

export default class Layout extends React.Component {
  constructor() {
    super()
    this.state = {
      messages: []
    }
  }

  componentWillMount() {
      var self = this
      const fetchMessages = fetch(process.env.URL, {credentials: 'same-origin'})

      function loadMyMessages(data) {
        data.json().then((jsonData) => {
          self.setMessages(jsonData)
        })
      }

      fetchMessages.then(loadMyMessages)
    }

    setMessages(data) {
      var messageArr = []
      data.messages.map((r) => {
        messageArr.push(r)
      })

      this.setState({
        messages: this.state.messages.concat(messageArr),
      })
    }

  render() {
    return (
      <div id="componentLayout">
            <MessageList messages={this.state.messages}/>
            <MoreMessages setMessages={this.setMessages.bind(this)} />
      </div>
    )
  }
}

這個設計有什么不對或不推薦嗎？

Answer 1

在Layout組件中執行以下操作：

export default class Layout extends React.Component {
    constructor(props) {
        super(props)

        // ...

        this.setMessages = this.setMessages.bind(this);
        this.handleLoadMore = this.handleLoadMore.bind(this);
  }

  // ...

  handleLoadMore() {
      // your call to retrieve more data
  }

  render() {
      return (
          <div id="componentLayout">
              <MessageList messages={this.state.messages}/>
              <MoreMessages
                  setMessages={this.setMessages}
                  onLoadMore={this.handleLoadMore} />
           </div>
       );
    }
}

在您的MoreMessages組件中，您現在可以執行以下操作：

render() {
    return (
        <div id="more-messages">
            <button onClick={this.props.onLoadMore}>More Messages</button>
        </div>
    );
}