如何刷新 React Functional 組件？

Question

現在我正在使用 React Functional Component 並打算顯示有關變量。

let bundles_data = [];
const SelectExistNFCType = (props) => {
   const setAdd = async () => {
       ...
        data.map((value, index) => {
            bundles_data.push(value)
        })
        ...
    }
}

我在調用setAdd function 時試圖顯示bundles_data 的值。現在bundles_data 正在改變，但不能立即顯示。 有什么解決辦法嗎？

Answer 1

請 React 的 state。

const SelectExistNFCType = (props) => {
   const [bundlesData, setBundlesData] = React.useState([]);
   const setAdd = async () => {
        ...
        data.map((value, index) => {
            setBundlesData([...bundlesData, value]);
        })
        ...
     }
}