Javascript 向父组件发送数据时作出反应

我从API加载

子组件

中的分页消息，并将

jsonData

发送到父

组件

，以处理向UI显示消息的操作。我用下面的代码成功地实现了这一点，但有人告诉我我的设计和数据传递有问题——特别是在我的

MoreMessages

组件中

有人知道我的尝试有什么可疑之处吗

MoreMessages.js

/* 在子组件中，我只需呈现一个按钮，当单击它时，我使用

self.props.setMessages（jsonData）

*/

导出默认类MoreMessages.Component{
构造函数（）{
超级（）
此.state={
页数：1
}
}
handleClick（）{
var self=这个
this.setState（{pages:this.state.pages+1}，（）=>{
var url=process.env.url+'？page='+this.state.pages
const fetchMessages=fetch（url，{credentials:'same origin'}）
函数loadMyMessages（数据）{
data.json（）.then（（jsonData）=>{
log（“将jsonData发送到布局组件中的道具”）；
self.props.setMessages（jsonData）
})
}
fetchMessages.then（loadMyMessages）
});
}
render（）{
返回(
更多信息
)
}
}

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

导出默认类布局扩展React.Component{
构造函数（）{
超级（）
此.state={
信息：[]
}
}
组件willmount（）{
var self=这个
const fetchMessages=fetch（process.env.URL，{credentials:'same origin'}）
函数loadMyMessages（数据）{
data.json（）.then（（jsonData）=>{
self.setMessages（jsonData）
})
}
fetchMessages.then（loadMyMessages）
}
设置消息（数据）{
var messageArr=[]
data.messages.map（（r）=>{
消息到达推送（r）
})
这是我的国家({
messages:this.state.messages.concat（messageArr），
})
}
render（）{
返回(
)
}
}

---

此设计是否有任何错误或不推荐的地方？

在您的

布局中执行以下操作：

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
加载消息而不是它的父组件？它基本上只是一个按钮，所以如果它真的需要是一个单独的组件，就让它只是一个接受回调的按钮。您还应该删除呈现方法中的.bind（this）调用，并将它们移动到构造函数中，如下所示：
this.setMessages=this.setMessages.bind（this）
。在构造函数中使用绑定会导致在重新呈现时调用该绑定。这对您的组件来说是无用的开销。传递给
MoreMessages
组件的道具名为
onLoadMore
，因此它应该是：
onClick={This.props.onLoadMore}
感谢您捕捉到这个打字错误：）谢谢，为什么在
Layout
中加载数据比在
MoreMessages
中加载数据更好？您的MoreMessages组件应该是一个表示组件，并且应该是一个功能性无状态组件。您的容器组件，
Layout
是您应该控制状态的地方。丹·阿布拉莫夫（Dan Abramov）的《表象和容器组件》（Presentational and Container Components）是一本很好的读物，可能会对您有所帮助。你可以找到它@是的。如果考虑MVC（模型、视图、控制器），容器组件就是控制器，表示组件就是视图，数据就是模型。
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>
       );
    }
}

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