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);版畫改變值，而不是實際的分析得到的值...我無法理解它:(

我希望得到任何幫助。

來源

2017-09-13 jma-lima

你在做什麼來' parsed_order'在孩子？聽起來就像你在無意中突變它。請記住，對象是通過引用傳遞的，所以你的日誌調用將輸出任何'parsed_order'在執行時的值，這可能是在你爲該對象做了其他事情之後。你能否包含你的子組件邏輯？ – monners

我不認爲這正是它...記錄'parsed_order'就像它在代碼中應該打印不變的值。也許我不能把自己的頭圍繞在你寫的東西上 –

無論如何，我在代碼中添加了註釋代碼 –

你變異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);

來源

2017-09-13 01:44:33 monners

沒有汗水。歡迎回復。 – monners

react - 控制檯日誌打印未來變量值

回答

相關問題