React函数组件useEffect请求数据后生成分类选项异常问题

代码问题汇总 #

• useState异步更新导致读取不到最新data
  setData是异步方法，调用后不会立即更新当前作用域下的data变量，所以后续data.forEach遍历的还是初始空数组，逻辑不会执行。
• 选项去重逻辑完全错误
  1. options数组定义在forEach循环内部，每次遍历都会被重置为空
  2. 数组新增元素应该用push方法，你用+=会把对象转成字符串拼接，完全不符合预期
  3. indexOf判断对象永远返回-1，因为对象是引用类型，不能直接用indexOf匹配
• 事件绑定错误
  Select组件的onChange没有正确绑定处理函数，你写的onChange={() => handleSelectChange}只是返回了函数本身，没有执行，也没有传递事件参数
• React JSX属性使用错误
  原生class、for属性在JSX中要分别换成className、htmlFor
• 状态更新后立即读取旧值
  setselectedOption是异步更新，调用后立即打印selectedOption拿到的还是更新前的旧值

修复后完整代码 #

import { useState, useEffect } from 'react';
import axios from 'axios';
// 此处替换为你自己的Select组件导入路径
import Select from 'react-select';

function AdminDashBoard() {
    const [data, setData] = useState([]);
    const [selectedOption, setSelectedOption] = useState("");
    const [c_options, setC_options] = useState([]);

    useEffect(() => {
        axios.get("http://localhost:8000/products")
            .then(response => { 
                const resData = response.data.result;
                setData(resData);
                // 直接用接口返回的最新数据处理，无需等待state异步更新
                const options = [];
                const existedCategory = new Set(); // 用Set做分类去重效率更高
                resData.forEach(element => {
                    if (!existedCategory.has(element.category)) {
                        existedCategory.add(element.category);
                        options.push({ value: element.category, label: element.category });
                    }
                })
                setC_options(options);
            })
            .catch(err => { console.log(err) })
    }, [])

    function handleSelectChange(event) {
        const value = event.target.value;
        setSelectedOption(value);
        console.log("selected category : ", value);
    }

    return (
        <div className="row-fluid main">
            <div className="form-group">
                <label htmlFor="formControlSelect2">select category :</label>
                <Select 
                    className="form-control" 
                    id="formControlSelect2" 
                    onChange={handleSelectChange} 
                    options={c_options} 
                />
            </div>
            <span id="products"></span>
        </div>
    );
}
export default AdminDashBoard;

内容的提问来源于stack exchange，提问作者Mazen haj ali the best