Create-react-appの結果でLodashを使用すると、 "Uncaught TypeError：_this.reduceは関数ではありません"

Question

私はReactを新しくしてcreate-react-appと私のApp.jsファイルにLodashを使用しようとしています。エラーになります。 Uncaught TypeError: _this.reduce is not a function。私は私のindex.jsファイルの私のApp.jsと

import Lodash from 'lodash'; 

の先頭に

import _ from 'lodash'; 
import shuffle from 'lodash/shuffle'; 
import random from 'lodash/random'; 
import find from 'lodash/find'; 

を追加しました。

var total = [0, 1, 2, 3].reduce(function(sum, value) { 
    return sum + value; 
    }, 0); 

しかしlodashは、上記のエラースロー使用する線：

は、テストのために私が働くMDNから、このreduce例使用しました。この場合、

var books = _.shuffle(this.reduce((p, c, i) => { 
    return p.concat(c.books); 
    }, [])).slice(0, 4); 

をthisですこのような配列：

var data = [ 
    { 
    name: 'Mark Twain', 
    imageUrl: 'images/authors/marktwain.jpg', 
    books: ['The Adventures of Huckleberry Finn'] 
    } 
]; 

Answer 1

コメントセクションごとに、 this参照は、あなたが期待しているものを指していません。

dataに変更しても問題ありません。

Answer 2

コードを見ると、キーワードthisが実際に配列を参照する可能性は非常に低いです。近くに不可能な私は言うだろう。 thisキーワードがJavascriptでどのように動作するかについての完全な本を書くことができます。 _thisの値は、のさまざまな動作をバーベルがどのように処理するかです。

console.log(this) 

function someFunction(){ 
    console.log(this); 
    const someSubFunction = function() { 
    console.log(this) 
    } 
    someSubFunction(); 

    const someOtherFunction = () => { 
    console.log(this) 
    } 

    someOtherFunction(); 
} 

someFunction(); 

このコードはにバベルでtranspiledされています：

"use strict"; 

console.log(undefined); 

function someFunction() { 
    var _this = this; 

    console.log(this); 
    var someSubFunction = function someSubFunction() { 
    console.log(this); 
    }; 
    someSubFunction(); 

    var someOtherFunction = function someOtherFunction() { 
    console.log(_this); 
    }; 

    someOtherFunction(); 
} 

someFunction(); 

this値が_thisという変数に再割り当てされている様子がわかり この例で考えてみましょう。

この例では、すべてのログステートメントはundefinedを出力します。ルートスコープでキーワードthisを使用した場合、それは確かにundefinedになります。実際に蒸解した例の3行目を見ると、文字通りthisはundefinedに置き換えられます。グローバルスコープ上の関数内では、thisもundefinedです。

クラス内thisは、クラスによって定義されたメソッドの内部またはコンストラクタ内に直接ある場合、そのクラスのインスタンスを参照します。

とにかく長い話ですが、これが実際に何を指しているのかを理解する必要があります。ほとんどの場合、あなただけの変数にあなたの配列を代入する必要があり、実行します。

var books = _.shuffle(data.reduce((p, c, i) => { 
    return p.concat(c.books); 
}, [])).slice(0, 4); 

あなたががlodashをやろうとしている場合、あなたはまた、一貫して、ちょうどこのようlodash使用できます。

var books = _.chain(data) 
    .reduce((p,c,i) => _.concat(c.books), []) 
    .shuffle() 
    .slice(0,4) 
    .value(); 

私の経験で少し読みやすくなりました。