Question

饮料：阵列乘客对象内部的参考不是检索票证：值。如何从数组内部引用外部对象票证值？

import React from 'react';

class Login extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            tagline: 'We rank what people are talking about.',
            year: new Date().getFullYear()
        };

        this.onFormSubmit = this.onFormSubmit.bind(this);
    }

    onFormSubmit(e) {
        console.log('onFormSubmit', e)
        console.log('this.state', this.state);
    };

    render() {
        return (<div className="app">
            <div className="welcome">
                <header>
                    <div className="wikitags-logo">
                        <img src="imgs/wikitags-logo.png"/>
                    </div>
                    <h2>Admin Portal</h2>
                    <p>{ this.state.tagline }</p>
                </header>

                <section className="login-form">
                    <form onSubmit={ this.onFormSubmit }>
                        <div className="fl w100">
                            <div className="mdl-textfield mdl-js-textfield">
                                <input className="mdl-textfield__input" type="text" id="email" value={ this.state.email }/>
                                <label className="mdl-textfield__label" htmlFor="email">Email</label>
                            </div>
                        </div>

                        <div className="fl w100">
                            <div className="mdl-textfield mdl-js-textfield">
                                <input className="mdl-textfield__input" type="password" id="password" value={ this.state.password }/>
                                <label className="mdl-textfield__label" htmlFor="password">Password</label>
                            </div>
                        </div>

                        <button type="submit" className="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
                            Login
                        </button>
                    </form>
                </section>

                <footer>
                    &copy; { this.state.year } WikiTags
                </footer>
            </div>
        </div>);
    }
}

export default Login;

Answer 1

而不是：

{
    name: 'Jane Doloop',
    paid: true,
    ticket: 'coach',
    drinks: [ticketDrinks(this.ticket, 0), ticketDrinks(this.ticket, 1)]
}

你可以这样做：

{
    name: 'Jane Doloop',
    paid: true,
    ticket: 'coach',
    drinks: [0, 1]
}

然后让Array.prototype.map()迭代对象数组并动态访问属性tikets。

而且，您使另一个Array.prototype.map()调用方法ticketDrinks()来传递当前对象属性drinks。

代码：

var passengers = [{name: 'Jane Doloop',paid: true,ticket: 'coach',drinks: [0, 1]},{name: 'Dr.Evel',paid: true,ticket: 'firstclass'},{name: 'Sue Property',paid: false,ticket: 'firstclass'},{name: 'John Funcall',paid: true,ticket: 'coach'}],
    ticketDrinks = function (ticket, location1) {
      console.log(ticket, location1);
      var drink1, drink2;
      if (ticket === 'firstclass') {
        drink1 = 'cola';
        drink2 = 'water';
        return location1 === 0 ? drink1 : drink2;
      } else if (ticket === 'coach') {
        drink1 = 'wine';
        drink2 = 'champagne';
        return location1 === 0 ? drink1 : drink2;
      }
      return null;
    },
    result = passengers.map(function (user) {
      if (user.drinks) {
        user.drinks = user.drinks.map(function (location) {
          return ticketDrinks(user.ticket, location)
        });
      }

      return user;
    });

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Javascript - 从内部数组引用outter对象

1 个答案: