Question

我使用admin-on-rest显示来自api的用户列表。我无法弄清楚如何将src/Progress.js中的类传递给src/Users.js

中的datagrid组件

这是Users.js。我已经包含了整个文件，因为我可能会遗漏一些非常基本的东西，因为我刚接触到React：

import React from 'react';
import { Line } from 'rc-progress';
import {Datagrid,Edit,EmailField,Filter,FunctionField,List,ReferenceField,SimpleShowLayout,Show,TextField,TextInput } from 'admin-on-rest';
import Progress from './Progress';

export const UserList = (props) => (
<List {...props} filters={<PostFilter />}>
    <Datagrid bodyOptions={{ stripedRows: true}}>
        <TextField source="firstName" />
        <TextField source="lastName" />
        <TextField source="email" />
        <TextField source="phone" />
        <TextField source="type" />

//below is the custom column using rc-progress
//the Line component has a property percent that takes an int for example 40
//I tried to pass a variable from the Progress class called progressPercent with by using percent={Progress.progressPercent}

        <FunctionField label="Progress" render= {function render() { return ( <Line percent={Progress.progressPercent} strokeWidth="6" strokeColor="#38bcd5" />);}} />

        <ViewNewHireButton />
    </Datagrid>
</List>
);

export default UserList;

我收到错误uncaught at handleFetch TypeError: Cannot read property 'progressPercent' of undefined

这是Progress.js文件，我在这里计算一个值以传递给呈现进度条的Line组件

import React, {Component} from 'react';

//create Progress class and initiate arrays
class Progress extends Component {
constructor() {
    super();
    this.state = {
        totalTasks: [],
        totalTaskCount: 0,
        progressPercent: 0
    };
}

//make api call, get all tasks from workflow and calculate value for progress percent
componentWillMount(progressPercent) {
    fetch   ('http://localhost:4001/Workflow')
    .then(results => {
        return results.json();
    }).then(data => {

        //get tasks from api and add to array
        let totalTasks = data.results.map((totalTasks) => {
        return(totalTasks.results)
        })

        this.setState({totalTasks: totalTasks});
        console.log("state", this.state.totalTasks);

        //hardcode count of user tasks for now
        let userTaskCount = 1;

        //divide count of user tasks by count total tasks to get progress percent
        let progressPercent = userTaskCount/totalTasks.length;
    })
}

}

在我读过的所有文章中，我似乎无法确定如何从一个单独的类中将变量传递到admin-on-rest中的数据网格

我找到了这篇文章： How to access variables inside render in ReactJS from another class 但它专门讨论了通过渲染传递它我不想尝试我只是试图传递数据。

听起来Redux可以通过全局提供数据来解决这些问题，但这对我来说不是一个选择。

也许整个方法都有问题请告诉我，或者如果需要更多信息，请告诉我。谢谢！

将变量从类传递到admin-on-rest datagrid

0 个答案: