React state 值在通過 console.log() 打印時顯示，但不在網頁上

Question

我正在嘗試使用 React 將 props.usdGain 中的美元數字props.usdGain轉換為 web 頁面。 讓我絆倒的是console.log("",props.usdGain); 成功地將正確的數字放入我的控制台。
但是，底部的行{"Net earnings $"+props.usdGain}顯示為undefined 。

我看到的一個奇怪的效果是，如果我在代碼編輯器中進行任何無害的編輯（例如添加空格或按 Enter），正確的值會突然出現在屏幕上。 但是，當我在瀏覽器上進行硬刷新時，它會直接回到undefined 。

有任何想法嗎？

Ps 不確定是否有幫助，但這個組件是通過 function 調用加載的，在我的 App.js 文件中帶有 JSX 片段。

import React from 'react';
import { Line } from 'react-chartjs-2';

const chart = (props) =>{
    console.log("💲",props.usdGain);
    return (
        <div style={{height: "500px", width: "800px"}} key={props.vaultId}>
        <Line data={props.chart} options={{
            responsive: true,
            title: {
                text: props.vaultId, 
                display: true,
                fontSize: 30
            },
            }}/>
        <p style={{color:"gray", fontSize: "18px"}}>
            {"Net earnings $"+props.usdGain}
        </p>
        </div>
    )
}

export default chart;

Answer 1

這是 JSX 解析器如何在花括號中編譯數據的問題。 在底層，JSX 期待單一評估或數據類型的表達式。 為了更好的理解，下面舉個例子； 當 babel 讀取你的 JSX 代碼來創建組件時，使用下面的 JS 代碼：

React.createElement(component, props, ...children)

一個例子：

<MyButton color='blue' shadowSize={2} />

或者坦率地說：

React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  'Click Me'
)

分解它，接受孩子的擴展運算符不能應用於您的表達式。 有關更多信息，請參閱https://reactjs.org/docs/jsx-in-depth.html 。

當我嘗試使用任何數據類型的多個對象（即：兩個單獨的字符串或兩個變量）重現您的問題時，它為我返回了未定義/失敗的聲音。 為什么它默默地為您失敗很可能是由於 JSX 將您的表達式讀取為兩個值的串聯，因此當它映射到 DOM 時，您只會看到undefined 。

至於您的解決方案，我建議將{"Net earnings $"+props.usdGain}解構為

{ `Net earnings $${ +props.usdGain }` }

字符串插值取勝。

讓我知道這是否適合您作為公認的解決方案。