react - コンソールログに将来の変数値が出力されます

Question

Im new to react。

親コンポーネント：

// handles parsed json order from child and retrieves parsed data 
// child component calls this method by calling this.props.onAdded()  
handleAdded = (orderData) => { 
    let items = orderData.items; 
    let ids = ''; 
    items.forEach(function(item) { 
     ids+=item.product_id.toString()+'&'; 
    }); 

    // some async call. 
    getProducts(ids).then((response) => { 
     // here is the orderData variable changed based on value got from api... 
     // lets say that it looks like orderData.item = 'something else' 
     // changed orderData value like this is printed in child component after file is parsed :(
     this.handleFindProductResult(orderData, response.data); 
    }); 
    } 

子コンポーネント：親コンポーネントで

// parse json order from file input 
getOrderFromFile = (file) => { 
    let reader = new FileReader(); 
    reader.readAsText(file); 
    reader.onload =() => { 
     const parsed_order = JSON.parse(reader.result); // parsed_order.item = 'something' 
     console.log('parsed:', parsed_order); // returns parsed_order.item = 'something else' 
     this.props.onAdded(parsed_order); 
    }; 
    reader.onerror = (error) => { 
     this.props.onAdded(false); 
    }; 
} 

、私はいくつかのsetState()を呼び出し、値が子コンポーネントから得た操作 - parsed_order。

問題はconsole.log('parsed:', parsed_order);プリントが実際に解析された値を値を変更していない...私はそれを理解カントということ、である:(

私は任意の助けをいただければ幸いです。

Answer 1

あなたにはどこかにさらにダウンparsed_orderを変異しています

更新する前にオリジナルのの値を保持する場合は、値を更新する前に必ず値を更新してください。あなたはクローンします子に渡す前にparsed_orderに移動します。 this.props.onAdded(parsed_order)

this.props.onAdded(Object.assign({}, parsed_order))

それとも、伝承、いくつかの中間変数構築して：あなたは `に何をしている

const originalOrder = Object.assign({}, parsed_order); this.props.onAdded(originalOrder);