如何将所选项目添加到表Reactjs中？

如何解决如何将所选项目添加到表Reactjs中？

我是React的初学者，我想从表单元格的select选项中写入项目，但我不知道如何。

import React,{useState,useEffect} from 'react';
import {getMeals} from './../../../../../services/mealService';


function MakeMenuForm() {

    const [meals,setMeals] = useState([]);
    useEffect(() => {
        const onInit = async () => {
            let response = await getMeals();
            setMeals(response)
            console.log(response);
        }
        onInit();
    },[])

    
    const [tableData,setTableData] = React.useState(meals);
    const [selected,setSelected] = React.useState("");

    function handleChange(event) {
        setSelected(event.target.value);
         let vals = event.target.value
         ? meals.filter(meal => meal.name === event.target.value)
         : meals;
        setTableData(vals);
    }

    return (
        <form>
            <label htmlFor="meal">Choose meal: </label>
            <select id="meal"  onChange={handleChange} >{meals.map(meal => <option value={meal.idMeal}>{meal.name}</option>)}</select> <br></br><br></br>

            <table border="1" >
                <thead>
                    <tr>
                        <th>Meal</th>
                        <th>Contect</th>
                        <th>Price</th>
                        <th>Meal type</th>
                    </tr>
                </thead>
                <tbody>
                    {tableData.map(meal =>(
                    <tr>
                        <td>{meal.name}</td>
                        <td>{meal.content}</td>
                        <td>{meal.price}</td>
                        <td>{meal.mealType}</td>

                    </tr>
                    ))}
                </tbody>
            </table>

        </form>
    )
}

export default MakeMenuForm;

这是我不好的尝试：D

解决方法

在处理程序中，您正在进行以下比较：

meals.filter(meal => meal.name === event.target.value)

您传递的值是idMeal（<option value={meal.idMeal}>），因此将其更改为：

meals.filter(meal => meal.idMeal=== event.target.value)

比较名称=== idMeal几乎肯定每次都会返回0个结果，这就是表为空的原因。