Результат запроса Graphql возвращается неопределенным - PullRequest
Новая
       7

Результат запроса Graphql возвращается неопределенным

0 голосов
/ 27 апреля 2018

Я получаю ошибку Uncaught (in promise) TypeError: Cannot read property 'privateKey' of undefined

Результат запроса сотрудника возвращается неопределенным при попытке console.log this.props.employee

Я использую Graphql и Next.js. Я не уверен, является ли componentWillMount правильным методом жизненного цикла для использования, так как this.props.data.employee равно undefined. 

    class EmployeeTable extends Component {
    state = {
        employeesList: [],
        privateKey: ""
    }

    fetchEmployees = async () => {
        console.log(this.props.data.employee);
        console.log(this.props.data.employee.privateKey);
        const adminWallet = new ethers.Wallet(this.state.privateKey, provider);
        const EmployeeStore = new ethers.Contract(address, abi, adminWallet);

        let count;
        await EmployeeStore.functions.employeesCount().then(function(value) {
        count = value;
        });

        let employeesList = [];
        for(let i = 1; i<=count; i++) {
            await EmployeeStore.getEmployeeByIndex(i).then(function(result) {
            employeesList.push(result);
        });
        };
        console.log(employeesList);
        return {employeesList}; 
    };


    componentWillMount = async () => {
        var employees = await this.fetchEmployees();
        this.setState({employeesList: employees});
    };  

    renderRows() {
        return this.state.employeesList.map((employee, index) => {
            return (<EmployeeRow
                key={index}
                employee={employee}
            />
            );
        });
    };

    render() {
        const { Header, Row, HeaderCell, Body } = Table;
        return(
            <div>
                <h3>Employees</h3>
                <Table>
                    <Header>
                        <Row>
                        <HeaderCell>Name</HeaderCell>
                        <HeaderCell>Employee ID</HeaderCell>
                        <HeaderCell>Address</HeaderCell>
                        <HeaderCell>Authenticated</HeaderCell>
                        </Row>
                    </Header>
                    <Body>{this.renderRows()}</Body>
                </Table>
            </div>
        )
    }
}

const employee = gql`
query employee($employeeID: String){ 
    employee(employeeID: $employeeID) {
        privateKey
    }
}
`;

export default graphql(employee, {
    options: {
        variables: {employeeID: "1234"}
    },
  })
  (EmployeeTable);

1 Ответ

0 голосов
/ 30 апреля 2018

При первом отображении компонента, заключенного в операцию Query, как в вашем коде, он получает data prop, но без результатов.

data содержит поле с именем loading. Если установлено значение true, это означает, что запрос еще не получил все результаты с сервера. Если операция прошла успешно, в следующий раз при визуализации компонента this.props.data будет иметь loading === false, а значение this.props.data.employee должно быть таким, как вы ожидаете.

По сути, вы должны проверить, является ли this.props.data.loading true или false перед вызовом fetchEmployees() и перед рендерингом дочерних компонентов, которые полагаются на результаты.

...