javascript - Meteor 将集合数据放在 Div 中

Question

添加类别.js

我想使用函数 mydata() 在此页面上显示类别。数据正在控制台中打印。我想使用 mydata() 函数绑定(bind) div 中的所有类别。

import { Layout, Menu, Breadcrumb, Icon, Form, Input, Button} from 'antd';
const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;
import React from "react";
import { Link, Router, Route, IndexRoute, browserHistory } from "react-router";
import { createForm } from 'rc-form';
import { Category } from "../../../imports/collections/category-db";

const FormItem = Form.Item;

function hasErrors(fieldsError) {
  return Object.keys(fieldsError).some(field => fieldsError[field]);
}

 class AddCategory extends React.Component {


  componentDidMount() {
    // To disabled submit button at the beginning.
    this.props.form.validateFields();
  }
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
           const category_name =values.categoryName;
           Meteor.subscribe('category');
           Meteor.call('categoryInsert',category_name);
           alert('category added cheers !');
      }
    });
  }
   state = {
    collapsed: false,
  };
  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  }

    mydata(){
       Meteor.subscribe('category');
      var categories = Category.find({}).fetch(); 
      categories.forEach(function(cat){ 
        console.log(cat.category_title);
      });  
    }

  render() {
    const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form;

    // Only show error after a field is touched.
    const userNameError = isFieldTouched('userName') && getFieldError('userName');

    return (
      <Layout>
        <Sider
          trigger={null}
          collapsible
          collapsed={this.state.collapsed}
        >
          <div className="logo" >
          </div>
          <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
            <Menu.Item key="1">
             <Link to="/users-admin"> <Icon type="user" />
              <span> USERS </span></Link>
            </Menu.Item>
            <Menu.Item key="2">
              <Link to="/category-admin">
              <Icon type="video-camera" />
              <span>Category</span>
              </Link>
            </Menu.Item>
            <Menu.Item key="3">
              <Icon type="mail" />
              <span>Blogs 3</span>
            </Menu.Item>
            <Menu.Item key="4">
              <Icon type="mail" />
              <span>Jobs 4</span>
            </Menu.Item>
          </Menu>
        </Sider>
        <Layout>
          <Header style={{ background: '#fff', padding: 0 }}>
            <Icon
              className="trigger"
              type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
              onClick={this.toggle}
            />
          </Header>
          <Content style={{ margin: '24px 16px', padding: 24, background: '#fff', minHeight: 720 }}>
            <Form layout="inline" onSubmit={this.handleSubmit}>
        <FormItem
          validateStatus={userNameError ? 'error' : ''}
          help={userNameError || ''}
        >
          {getFieldDecorator('categoryName', {
            rules: [{ required: true, message: 'Please input your username!' }],
          })(
            <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="Category tile" />
          )}
        </FormItem>

        <FormItem>
          <Button
            type="primary"
            htmlType="submit"
            disabled={hasErrors(getFieldsError())}
          >
            Log in
          </Button>
        </FormItem>
      </Form>
              {this.mydata()}
          </Content>
        </Layout>
      </Layout>
    );
  }
}

导出默认的 createForm()(AddCategory);

请推荐。

Answer 1

你只需要从你的 mydata() 函数返回一个 JSX div 条目数组，带有单独的 'key' 属性，例如:

mydata(){
   const data = [];
   Meteor.subscribe('category');
   var categories = Category.find({}).fetch();
   categories.forEach(function(cat, index){ 
     console.log(cat.category_title);
     data.push(<div key={`data-${index}`}>{ cat.category_title }</div>);
   });
   return data;
}