Question

我有一个React组件，我想动态添加子组件。

class ServicePlanChooseNewPlugin extends React.Component {
  cbaApi = new CbaApi();

  state = {
    availablePlugins: null,
  };

  componentDidMount() {
    this.getAvailablePlugins();
  }

  componentWillUnmount() {
    this.cbaApi.cancel();
  }

  getAvailablePlugins() {
    this.cbaApi.get(
      `/service-plans/${this.props.match.params.id}/plugins/available`,
      data => {
        this.setState({ availablePlugins: data });
      }
    );
  }

  render() {
    const { availablePlugins } = this.state;

    return (
      availablePlugins === null ? null : (
          _.chunk(availablePlugins, 2).forEach(value => (
            <Row gutter={16}>
              {value.forEach(innerValue => (
                <Col span={12}>
                  <Link
                    to={`/service-plans/${this.props.match.params.id}/add-plugin/${innerValue.Type}`}
                  >
                    <Card bordered={false} className={styles.clickable}>
                      <p className={styles.title}>{innerValue.Title}</p>
                      <p className={styles.mainContent}>{innerValue.Description}</p>
                      <p className={styles.priceDescription}>{innerValue.PriceDescription}</p>
                    </Card>
                  </Link>
                </Col>
            ))}
            </Row>
        ))
      )
    );
  }
}

export default ServicePlanChooseNewPlugin;

您可能可以轻松获得代码要执行的操作：

1）使用CbaApi从我的API服务器获取数据。

2）返回的数据应该是一个Array对象，其中包含availablePlugins。

3）AvailablePlugin对象具有多个属性包括“类型”，“标题”，“说明”和“价格说明”。

4）设置组件的状态，以便React可以重新渲染它。

5）借助lodash函数向其动态添加子组件。

子组件应放在行上，因为每行应包括不超过2个子组件。

但是，当我运行这段代码时，React一直告诉我render（）函数什么也不返回。我确信this.state.availablePlugins具有预期的数据，并且我对_chunk（）和forEach（）的使用是正确的，因为我已经对其进行了测试。

React警告渲染函数未返回任何内容

0 个答案: