Question

我试图将AJAX检索的数据放入父React组件中，以便将其反馈到子组件。我使用了定义here的流行模式，其中以评论列表为例：

组件/ CommentList.js

import React from 'React';

export class CommentList extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <ul> {this.props.comments.map(renderComment)} </ul>;
  }
  renderComment({body, author}) {
    return <li>{body}—{author}</li>;
  }
}

组件/ CommentListContainer.js

import React from 'React';
import { CommentList } from './CommentList';


export class CommentListContainer extends React.Component {
  constructor() {
    super();
    this.state = { comments: [] }
  }

  componentDidMount() {
    $.ajax({
      url: "http://get/some/api",
      dataType: 'json',
      success: function(comments) {
        this.setState({comments: comments});
      }.bind(this)
    });
  }
  render() {
    return <CommentList comments={this.state.comments} />;
  }
}

index.js：webpack的入口点

import React from 'react'
import { render } from 'react-dom'
import { CommentListContainer } from './components/CommentListContainer';

window.React = React;

render(
  <CommentListContainer />,
  document.getElementById('nav__react-target')
)

执行此操作时，我收到以下错误：

Uncaught ReferenceError: renderComment is not defined

我已经移动了这些方法，并且在没有运气的情况下调整了各个位置的依赖项导入。有什么想法吗？

提前致谢。

Answer 1

你没有对ES2015类的兄弟方法进行无人防守的引用（正如你在Java / C＃中所做的那样） - 相反，你需要明确引用this来获取类的方法：

render() {
  // I changed map(renderComment) to map(this.renderComment)
  return <ul>{this.props.comments.map(this.renderComment)}</ul>;
}

无法在React容器组件

1 个答案: