React预算分配应用出现undefined错误，请求代码审查

问题描述 #

我正在为React预算分配应用添加货币下拉菜单，预期用户点击对应选项后页面会做出相应切换，但每次启动页面时都会出现undefined错误，以下是相关代码：

App.js代码 #

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';

import { AppProvider } from './context/AppContext';
import Budget from './components/Budget';
import ExpenseTotal from './components/ExpenseTotal';
import ExpenseList from './components/ExpenseList';
import AllocationForm from './components/AllocationForm';
import RemainingBudget from './components/Remaining';
import Currency from './components/Currency';

const App = () => {
    return (
        <AppProvider>
            <div className='container'>
                <h1 className='mt-3'>Company's Budget Allocation</h1>
                <div className='row mt-3'>
                    <div className='col-sm'>
                        <Budget />
                    </div>
                    <div className='col-sm'>
                        <RemainingBudget />
                    </div>
                    <div className='col-sm'>
                        <ExpenseTotal />
                    </div>
                    <div className='col-sm'>
                        <Currency />
                    </div>
                </div>
                <h3 className='mt-3'>Allocation</h3>
                <div className='row '>
                    <div className='col-sm'>
                        <ExpenseList />
                    </div>
                </div>
                <h3 className='mt-3'>Change allocation</h3>
                <div className='row mt-3'>
                    <div className='col-sm'>
                        <AllocationForm/>
                    </div>
                </div>
            </div>
        </AppProvider>
    );
};

export default App;

Currency组件代码 #

import React, { useState,useContext,useEffect } from 'react';import { AppContext } from '../context/AppContext';

const Budget = () => {const [currency, setCurrency] = useState('');const { dispatch } = useContext(AppContext);

const handleChange = (event) => {
    setCurrency(event.target.value);
    changeCurrency()
  };

  const changeCurrency = () => {
    dispatch({
        type: 'CHG_CURRENCY',
        payload: currency,
    });
  }

useEffect(() => {console.log(currency);}, [currency] )

return (
    <div className="alert alert-secondary">
    <select id="inputGroupSelect02" onChange={handleChange}>
            <option defaultValue>Currency</option>
            <option value="$" name="dollar">$ Dollar</option>
            <option value="£" name="pound">£ Pound</option>
            <option value="€" name="euro">€ Euro</option>
            <option value="₹" name="ruppee">₹ Ruppee</option>
              </select>
              </div>
)};

export default Currency;

错误原因及修复方案 #

1. 组件定义与导出名称不匹配
   你在Currency组件里定义的是const Budget = () => {，但导出的却是export default Currency;，这会导致App中导入的Currency组件实际上是未正确定义的，直接引发undefined错误。
   修复：将组件定义改为const Currency = () => {，保持名称一致。

2. setState异步导致的payload值异常
   handleChange中先调用setCurrency再立刻执行changeCurrency，但React的setState是异步操作，此时currency还未更新为新值，会导致dispatch的payload是旧值或初始空字符串。
   修复方案二选一：

   • 直接用event.target.value作为payload传入dispatch，无需依赖state：

     const handleChange = (event) => {
         const selectedCurrency = event.target.value;
         setCurrency(selectedCurrency);
         dispatch({
             type: 'CHG_CURRENCY',
             payload: selectedCurrency,
         });
     };
     

   • 或者依赖useEffect监听currency变化再dispatch，去掉手动调用changeCurrency：

     const handleChange = (event) => {
         setCurrency(event.target.value);
     };
     
     useEffect(() => {
         if(currency) { // 避免初始空值触发dispatch
             dispatch({
                 type: 'CHG_CURRENCY',
                 payload: currency,
             });
         }
         console.log(currency);
     }, [currency, dispatch])
     

3. 初始state与默认选项的匹配
   初始state设为空字符串，而默认选项没有设置value，若上下文期望有初始货币值，可能也会引发undefined。可以给默认选项设置一个初始值，或者在上下文里初始化货币状态。

内容的提问来源于stack exchange，提问作者Nwasinachi Obieze