添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

Field code names are automatically generated for fields when they are first dragged into the form of the Kintone App settings. The field codes can be update through the App's settings. Follow the guide in the Help documents to update the Field codes.

Through the App's settings, let's set:

  • The "Title" field to have the field code title
  • The "Author" field to have the field code author
  • The "Record number" field to have the field code recordID (you'll need to drag and drop the Record Number field onto the form to update it's field code)
  • The app parameter is the same as before, pointing to the App ID of the Kintone App we want to get data from. The query parameter, query=order by recordID asc states to retrieve records from the Kintone App in ascending order of the Record Number value. You can check the Kintone API documents for more details on queries.

    Let's attach parameters to the end of the API request endpoint in the fetch request.

    const response = await fetch(requestEndpoint+parameters, fetchOptions);
        Enter fullscreen mode
        Exit fullscreen mode
    
    app.get('/getData', cors(corsOptions), async (req, res) => {
        const fetchOptions = {
            method: 'GET',
            headers:{
                'X-Cybozu-API-Token':process.env.API_TOKEN
        const parameters = "?app=1&query=order by recordID asc";
        const response = await fetch(requestEndpoint+parameters, fetchOptions);
        const jsonResponse = await response.json();
        res.json(jsonResponse);
        Enter fullscreen mode
        Exit fullscreen mode
    

    Since we're collecting a list of records from our Kintone App, let's render the response as a list. Note that Kintone's Get Records API responds the list of records as an array of objects. We'll follow the React document's example on how to handle our array to be rendered as a list in our React App.

    The first thing we'll do is update the callRestApi function. Let's remove the stringify statement, since in the code the response is easier to handle as JSON format.

    //return JSON.stringify(jsonResponse);
        Enter fullscreen mode
        Exit fullscreen mode
    
    const arrayOfLists = jsonResponse.records.map(
        record => <li><b>{record.title.value}</b> written by {record.author.value}</li>
    return arrayOfLists;
        Enter fullscreen mode
        Exit fullscreen mode
    

    Note here that we are referencing our field values in our records by stating record.title.value (the value of the Title field) and record.author.value (the value of the author field).

    The resulting array of lists will be returned to the useEffect hook, which will update the apiResponse state using setApiResponse (we don't need to make any changes to the code here).

    In the return statement of the RenderResult function, let's place {apiResponse} between <ul> elements, so we can render the array of lists.

      return(
              <h1>React App</h1>
              <ul>{apiResponse}</ul>
          </div>
        Enter fullscreen mode
        Exit fullscreen mode
    

    Aha...there seems to be a warning about "keys" 🗝️🤔

    The react.js documents states the following about keys:

    Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity

    Basically, we need to assign a unique ID to each list we create. Instead of manually creating these keys though, we'll use the unique IDs stored in our Kintone App. The Record number field in Kintone is an auto-incremented field, unique to each record. In our map function, let's add the key attribute to our li element, and assign the value of the Record number field by stating key={record.recordID.value}.

    //return JSON.stringify(jsonResponse);
    const arrayOfLists = jsonResponse.records.map(
        record => <li key={record.recordID.value}><b>{record.title.value}</b> written by {record.author.value}</li>
    return arrayOfLists;
        Enter fullscreen mode
        Exit fullscreen mode
    
    require('dotenv').config();
    const express = require('express');
    const cors = require('cors');
    const fetch = require('node-fetch');
    const PORT = 5000;
    const app = express();
    app.use(cors());
    const corsOptions = {
        origin: "http://localhost:3000"
    const requestEndpoint = "https://{subdomain}.kintone.com/k/v1/records.json";
    app.get('/getData', cors(corsOptions), async (req, res) => {
        const fetchOptions = {
            method: 'GET',
            headers:{
                'X-Cybozu-API-Token':process.env.API_TOKEN
        const parameters = "?app=1&query=order by recordID asc";
        const response = await fetch(requestEndpoint+parameters, fetchOptions);
        const jsonResponse = await response.json();
        res.json(jsonResponse);
    app.listen(PORT, () => {
        console.log(`Example app listening at http://localhost:${PORT}`);
        Enter fullscreen mode
        Exit fullscreen mode
    
    import React, { useState, useEffect } from 'react';
    import ReactDOM from 'react-dom';
    const restEndpoint = "http://localhost:5000/getData";
    const callRestApi = async () => {
        const response = await fetch(restEndpoint);
        const jsonResponse = await response.json();
        console.log(jsonResponse);
        //return JSON.stringify(jsonResponse);
        const arrayOfLists = jsonResponse.records.map(
          record => <li key={record.recordID.value}><b>{record.title.value}</b> written by {record.author.value}</li>
        return arrayOfLists;
    function RenderResult() {
      const [apiResponse, setApiResponse] = useState("*** now loading ***");
      useEffect(() => {
          callRestApi().then(
              result => setApiResponse(result));
      },[]);
      return(
              <h1>React App</h1>
              <ul>{apiResponse}</ul>
    ReactDOM.render(
        <RenderResult/>,
        document.querySelector('#root')
        Enter fullscreen mode
        Exit fullscreen mode
          

    Built on Forem — the open source software that powers DEV and other inclusive communities.

    Made with love and Ruby on Rails. DEV Community © 2016 - 2024.