如何將 select 下拉列表中的第一個值設置為默認反應

Question

我有一個反應程序，它根據下拉列表的值顯示一個表格。 我希望程序默認根據下拉列表中的第一個值顯示表格。

下拉列表中的第一個值與默認值有很大不同，並且下拉列表值總是在變化。 因此，數據在首次加載時可能會產生誤導。

這是我的代碼片段，里面有一些描述。 謝謝。

const CompletenessApp = () => {
    const [completeness, setcompleteness] = useState([]);
    const [loading, setloading] = useState(false);
    const [valueSelected, setValueSelected] = useState({value:'all'});
    const [periodSelected, setPeriodSelected] = useState({value:'20200702'}); // the default value that is used to filter the data.
    const valid = [
        {id:"all", variable:"all"},{id:"true", variable:"true"}, {id:"false", variable:"false"}, {id:"null", variable:"null"},
    ];
    useEffect(() => {
        const fetchData = async () => {
            try{
                const res = await axios.get('http://localhost:8000/api/completeness/');
                setcompleteness(res.data);
                setloading(true);
            } catch (e) {
                console.log(e)
            }
        }
        fetchData();
    }, []);
    // when the page loads for the first time it filters the data based on the period value set in the state. I want the data to be filtered based on the first value in the dropdown instead, the first value in the dropdown is different from the default value set.
    const handlePeriodChange = e => {
        setPeriodSelected({value : e.target.value})
    }

    const handleValueChange = e => {
        let boolvalue = Boolean
        e.target.value === 'true'? boolvalue = true:
        e.target.value === 'false'? boolvalue = false:
        e.target.value === 'all'? boolvalue = 'all':
        boolvalue=null
        setValueSelected({value : boolvalue})
    }
    //filtered data to be displayed
    const filteredCompleteness = completeness.filter(
        completedata=> (completedata.period === periodSelected.value)
        &&(valueSelected.value !== 'all'?completedata.complete === valueSelected.value:{}))


    return(
        <div>
            <div className="selection-row">
                <div className="stats-columns">
                    <div className="stats-label">Period</div>
                    //the relevant dropdown is here
                    <select onChange={e => handlePeriodChange(e)}>
                        {Array.from(new Set(completeness.map(obj => obj.period)))
                            .sort().reverse()
                            .map(period => {
                            return <option value={period}>{period}</option>
                        })}
                    </select>
                </div>
                <div className="stats-columns">
                    <div className="stats-label">Value</div>
                    <select onChange={e => handleValueChange(e)}>
                        {valid.map((obj) => {
                            return <option value={obj.id}>{obj.variable}</option>
                        })
                        }
                    </select>
                </div>
            </div>
            <hr></hr>
            <div className="results-table">
                 //table is displayed here
            </div>
        </div>
    );
}


export default CompletenessApp;

Answer 1

// above return
const options = Array.from(new Set(completeness.map((obj) => obj.period)))
  .sort()
  .reverse()
  .map((period) => {
    return {
      value: period,
      label: period,
    };
  });


// in jsx

<select defaultValue={options[0].value} onChange={e => handlePeriodChange(e)}>
 {
  options.map((obj) => {
    return <option value={obj.value}>{obj.label}</option>;
  })
}
</select>

試試這個，讓我知道。