反应将数据发送到父组件

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>
    );
}