Question

我在春天使用react为我的应用程序创建了一个前端，并且我使用了许多关系来让员工轮班。当我运行localhost时，会返回employeeID和name，但是转换是空白的。

这是Json输出：

var myBindings = Office.context.document.bindings;
var myAddress = "Sheet1-1!A1:B10";
myBindings.addFromNamedItemAsync(myAddress, "matrix", {id:"myBind"}, 
function(result){});

}

{
"_embedded" : {
"employees" : [ {
  "employeeID" : "0001",
  "name" : "John Mitchell",
  "id" : 1,
  "_links" : {
    "self" : {
      "href" : "http://localhost:8080/api/employees/1"
    },
    "employee" : {
      "href" : "http://localhost:8080/api/employees/1"
    },
    "shifts" : {
      "href" : "http://localhost:8080/api/employees/1/shifts"
    }
  }

这是我的反应代码：

{
"_embedded" : {
"shifts" : [ {
  "shifts" : "Sunday Evening",
  "id" : 1,
  "_links" : {
    "self" : {
      "href" : "http://localhost:8080/api/shifts/1"
    },
    "shift" : {
      "href" : "http://localhost:8080/api/shifts/1"
    }
  }
}, {
  "shifts" : "Monday Day",
  "id" : 2,
  "_links" : {
    "self" : {
      "href" : "http://localhost:8080/api/shifts/2"
    },
    "shift" : {
      "href" : "http://localhost:8080/api/shifts/2"
    }
  }
}, {
  "shifts" : "Tuesday Night",
  "id" : 3,
  "_links" : {
    "self" : {
      "href" : "http://localhost:8080/api/shifts/3"
    },
    "shift" : {
      "href" : "http://localhost:8080/api/shifts/3"
    }
  }
} ]

}

class App extends React.Component {

constructor(props) {
    super(props);
    this.state = {employees: []};
}

componentDidMount() {
    client({method: 'GET', path: '/api/employees'}).then(response => {
        this.setState({employees: response.entity._embedded.employees});
    });
}

render() {
    return (
        <EmployeeList employees={this.state.employees}/>
    )
}

}

class EmployeeList extends React.Component{
render() {
    var employees = this.props.employees.map(employee =>
        <Employee key={employee._links.self.href} employee={employee}/>
    );
    return (
        <table>
            <tbody>
                <tr>
                    <th>Employee ID</th>
                    <th>Name</th>
                    <th>Shift</th>
                </tr>
                {employees}
            </tbody>
        </table>
    )
}

}

class Employee extends React.Component{
constructor(props) {
    super(props);
    this.state = {shifts:[]};
}
componentDidMount() {
    client({method: 'GET', path: '/api/employees._links.shifts.href'}).then(response => {
        this.setState({shifts: response.entity._embedded.shifts});
    });
}

render() {
    const shifts = this.state.shifts.map(shift =>
        <div key={shift.id}>{shift.shifts}</div>
    );

    return (
        <tr>
            <td>{this.props.employee.employeeID}</td>
            <td>{this.props.employee.name}</td>
            <td>{shifts}</td>
        </tr>
    )
}

我只想在我运行本地主机时为每位员工返回班次（例如：＆＃34;轮班＆＃34;：＆＃34;周日晚上＆＃34;）。

非常感谢任何帮助，提前谢谢。

修改

尝试在员工班级中转换时会返回404错误

Answer 1

您在Shift课程中进行了循环登录，想要渲染Shift，但在渲染函数中创建了更多Shift，这将在渲染功能中创建更多等等。除非您想重复使用Shift或出于特定原因，否则我不会看到Shift类的任何需要。

class Employee extends React.Component{

    constructor() {
        // set the initial state of you will get an error in the render function
        this.state = { shifts: [] };
    }

    // load the shifts when the component is ready
    componentDidMount() {
        client({method: 'GET', path: this.props.employee._links.shift.href}).then(response => {
            this.setState({shifts: response.entity._embedded.shifts});
        });
    }

    render() {
        const shifts = this.state.shifts.map(shift =>
            <div key={shift.id}>{shift.shifts}</div>
        );

        return (
            <tr>
                <td>{this.props.employee.employeeID}</td>
                <td>{this.props.employee.name}</td>
                <td>{shifts}</td>
            </tr>
        )
    }
}

使用React.js呈现JSON

1 个答案: