Ant-design-pro: routes取到data ,但页面不显示

Created on 2 Mar 2018  ·  13Comments  ·  Source: ant-design/ant-design-pro

routes:
   console.log(data);  //打印
    return (
      <PageHeaderLayout title="管理">
        <Card bordered={false}>
          <div className={styles.tableList}>
            <div className={styles.tableListForm}>
              {this.renderForm()}
            </div>
            <div className={styles.tableListOperator}>
              <Button icon="plus" type="primary" onClick={() => this.handleModalVisible(true)}>
                新建
              </Button>
              {
                selectedRows.length > 0 && (
                  <span>
                    <Button>批量操作</Button>
                    <Dropdown overlay={menu}>
                      <Button>
                        更多操作 <Icon type="down" />
                      </Button>
                    </Dropdown>
                  </span>
                )
              }
            </div>
            <StandardTable
              selectedRows={selectedRows}
              loading={loading}
              data={data}
              columns={columns}
              onSelectRow={this.handleSelectRows}
              onChange={this.handleStandardTableChange}
            />
          </div>
        </Card>
        <CreateForm
          {...parentMethods}
          modalVisible={modalVisible}
        />
      </PageHeaderLayout>
打印:
Object { data: Array[760] }

__

Most helpful comment

@lingxiaoxin 说明list(也即是Table组件的dataSource)不是数组,此字段需要的是Array,你检查下返回值,给list正确赋值下~

All 13 comments

這個之前我有遇到, 一般來說是沒有下 connect 命令去 連結 model 和 component
可以參考這裡的connetc 說明 https://segmentfault.com/a/1190000013102730

能否指出具体是那个地方有问题, @gamemore ,我没看出来问题,
我这个数据是能打印出来,就是页面不显示
有点小糊涂,请谅解,帮忙解答一下

依造, Redux 的架構, 數據改變, 只能透過在 reducer 中 return 新的 state

你可以參考一下 BasicList.js 原始碼中, 有這些程式碼

...
// 綁定 list 這個 model
@connect(({ list, loading }) => ({
  list,
  loading: loading.models.list,
}))

...
 render() {
    // reducer 函數會改變 state , 從 props 裡面提取改變的數值出來
    const { list: { list }, loading } = this.props;
models:
import { queryContract, removeContract, addContract } from '../services/api';
export default {
    namespace: 'contract',
    state: {
        data: {
          list: [],
          pagination: {},
      },
  },
  effects: {
        *fetch({ payload }, { call, put}) {
            const response = yield call(queryContract, payload);
            console.log("success");
            console.log(response);
            yield put({
                type: 'save',
                payload: response,
            });
        },
        *add({ payload, callback }, { call, put }) {
            const response = yield call(addContract, payload);
            yield put({
                type: 'save',
                payload: response,
            });
            if (callback) callback();
        },
        *remove({ payload, callback }, { call, put }) {
            const response = yield call(removeContract, payload);
            yield put({
                type: 'save',
                payload: response,
            });
            if (callback) callback();
        },
    },
    reducers: {
        save(state, action) {
            console.log(action.payload);
            return {
                ...state,
                data: action.payload,
            };
        },
    },
};  

routes:
@connect(({ contract , loading }) => ({
contract,
loading: loading.models.contract,
}))
render() {
const { contract: { data }, loading } = this.props;
const { selectedRows, modalVisible } = this.state;

我是这样写的啊,你看一下

<StandardTable
  selectedRows={selectedRows}
  loading={loading}
  data={{ list: data.data }}
  columns={columns}
  onSelectRow={this.handleSelectRows}
  onChange={this.handleStandardTableChange}
/>

props.data的值不对,应该这样data={{ list: data.data }} (参考你打印的data,是个对象,里面有个data字段 值为数组)

@valleykid 修改过之后
TypeError: data.slice is not a function
是不是我少写了什么或哪里写错了

@lingxiaoxin 说明list(也即是Table组件的dataSource)不是数组,此字段需要的是Array,你检查下返回值,给list正确赋值下~

如果问题已解决,请关闭下issue

很感谢@valleykid,@gamemore

boolean数据怎么写入Table

数组条目里的boolean数据吗?转成字符串好了

很感谢@valleykid,@gamemore

怎么解决的

没说怎么解决就关了???

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Yoping picture Yoping  ·  3Comments

suifan picture suifan  ·  3Comments

kaoding picture kaoding  ·  3Comments

yjz1004 picture yjz1004  ·  3Comments

2uncle-code picture 2uncle-code  ·  3Comments