0

我收到错误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);
4

1 回答 1

0

第一次使用 Query 操作包装的组件（例如在您的代码中）被渲染时，它会收到dataprop，但还没有结果。

data包含一个名为loading. 如果设置为true，则表示查询尚未从服务器接收到所有结果。如果操作成功，下次渲染组件时this.props.data将具有loading === false并且this.props.data.employee应该具有您期望的值。

基本上，您应该检查是否this.props.data.loading是true或false在调用fetchEmployees()之前以及在渲染依赖结果的子组件之前。

于 2018-04-30T07:01:08.150 回答