Question

我有以下想法：

我想从Reactstrap中显示一堆Card-Components。每个Card-Components都有另一个组件，它显示一个进度条以显示重新加载的时间。这可以很好地使用回调函数将其传递给子组件，该组件在重新加载时间结束时被触发。

现在我想到了如何管理Card-Component内部的数据。数据来自第三方API（简单JSON）。我试图在Sails.JS Helper中实现这个数据获取逻辑。

但我无法从此组件内部调用全局select t.*, ((case when t.col1 = t1.col1 then 1 else 0 end) + (case when t.col2 = t1.col2 then 1 else 0 end) + (case when t.col3 = t1.col3 then 1 else 0 end) + . . . ) as num_in_common from t cross join t t1 where t1.id = 1; -- or however you define "record1" order by num_in_common desc;对象。我在sails中全局启用了sails对象：

config/globals.js

所以这是我正在使用的Card-Component：

/**
 * THIS FILE WAS ADDED AUTOMATICALLY by the Sails 1.0 app migration tool.
 * The original file was backed up as `config/globals-old.js.txt`
 */

 module.exports.globals = {
   _: require('lodash'),
   async: require('async'),
   models: true,
   sails: true
 };

我的ProgressBar组件如下所示：

import React, {Component} from 'react';
import { Card, CardBody, CardImg, CardText, CardHeader, CardFooter } from 'reactstrap';
import { Row, Col } from 'reactstrap';
import { Progress } from 'reactstrap';
import ProgressBar from './ProgressBar';

class MyCard extends Component {
    constructor(props) {
        super(props);
        console.log('Constructed card');
        this.state = {};
        this.progressUpdateCallback = this.progressUpdateCallback.bind(this);
        /*var sails = require(sails);*/
        this.thirdPartyInfo = sails.helpers.thirdPartyInfo();
    }

    progressUpdateCallback() {
        console.log('In callback');
    }

    componentDidMount() {
        console.log('Card component mounted');
    }

    render() {
        return(
            <Col xs={1} sm={2} md={3} lg={4} className="mx-auto">
                <Card className="mt-4">
                    <CardHeader>
                        <Row>
                            <Col xs={2} sm={2} md={2} lg={2}>
                                <img src={this.props.cardLogo} 
                                    className="float-left img-fluid" />
                            </Col>
                            <Col className="text-left">
                                <strong>{this.props.headerText}</strong>
                            </Col>
                        </Row>
                    </CardHeader>
                    <CardBody>
                        <CardText>{this.props.text}</CardText>
                    </CardBody>
                    <CardFooter>
                        <ProgressBar parentUpdateMillis={this.props.updateAfterSeconds * 1000} updateMillis="1000" callback={this.progressUpdateCallback} />
                    </CardFooter>
                </Card>
            </Col>
        );
    };
}

export default MyCard;

我的助手：

import React, {Component} from 'react';
import { Progress } from 'reactstrap';

class ProgressBar extends Component {
    constructor(props) {
        super(props);
        this.state = {
            reloadedCounter: 0,
            currentProgBarPercent: 0
        };
        this.updateProgBar = this.updateProgBar.bind(this);
    }

    updateProgBar() {
        if(this.state.currentProgBarPercent == 100) {
            if(typeof(this.props.callback) === 'function') {
                this.props.callback();
            }
            this.setState({
                reloadedCounter: 0,
                currentProgBarPercent: 0
            });

        } else {
            this.setState({
                reloadedCounter: this.state.reloadedCounter + 1,
                currentProgBarPercent: (this.state.reloadedCounter + 1) * (100 / (this.props.parentUpdateMillis / this.props.updateMillis))
            });
        }
    }

    componentDidMount() {
        setInterval(this.updateProgBar, this.props.updateMillis);
    }

    render() {
        return(
            <div>
                <Progress value={this.state.currentProgBarPercent} />
            </div>
        );
    };
}

export default ProgressBar;

但在提起那个洞之后，我在控制台中显示了以下内容：

var sprintf = require("sprintf-js").sprintf;

module.exports = {
  friendlyName: 'Some info',
  description: 'Returns some info',

  inputs: {
    what: {
      type: 'string',
      example: 'currentTime',
      description: 'Fetch with information',
      required: true
    }
  },

  exits: {
    success: {
      outPutFriendlyName: 'Information',
      outputDescription: 'TODO: Explain and define the model to return the data'
    },

    infoNotFound: {
      description: 'Could not find the given type of information'
    }  
  },

  fn: function (inputs, exits) {
    var apiURL = sprintf('https://3rdPartySite/v1/%s', inputs.what);
    console.log('Using %s for fetching data from 3rdPartySite', apiURL);

    fetch(apiURL).then( results => {
      return results.json();
    }).then(data => {
      console.log('Info result: %j', data.results);
    });

    // All done.
    return exits.success();
  }
};

我无法弄清楚我做错了什么

Answer 1

您无法访问react组件中的sails对象，因为组件的代码在客户端执行，sails对象可以在应用程序的服务器端全局访问

React.JS中的Sails.JS全局变量

1 个答案: