使用选择输入更改状态（包含对象）的值

Question

我用Meals（id，名称，价格，类型）和Weeks（id，numberOfWeek，mondayMeal，tuesdayMeal ...）创建了MealPlan应用程序-ID是在我的Java后端中自动生成的

前端是用React创建的，但是我对此并不陌生（和一般来说是javascript），所以我被困在我想用from创建每周新计划的时候。

应该发生这种情况的组件如下所示：

class MealPlanEdit extends Component {

  emptyWeek = {
    numberOfWeek: '',
    mondayMeal: '',
    tuesdayMeal: '',
    wednesdayMeal: '',
    thursdayMeal: '',
    fridayMeal: ''
  };

  constructor(props) {
    super(props);
    this.state = {week: this.emptyWeek};
    this.handleChange = this.handleChange.bind(this);
  }

  async componentDidMount() {
     if (this.props.match.params.id !== 'new') {
      const mealplan = await (await 
      fetch(`/mealplan/${this.props.match.params.id}`)).json();
      this.setState({week: mealplan});
     }
  }

  handleChange(event) {
    const target = event.target;
    let week = {...this.state.week};
    week[target.name] = target.value;
    this.setState({week});
  }

以及表单的一部分：

<Input type="select" name="mondayMeal" id="mondayMeal" value= 
{this.state.mondayMeal} onChange={this.handleChange}>
         <option value={meal}>{meal.name}</option>
         ...
</Input> 

使用这样的一餐：

meal = {
    id: '',
    name: '',
    price: '',
    type: '',
  };

现在运行我的应用程序时，我得到的整个进餐对象都在属性“名称”中返回：

日志输出：“请求创建以下用餐计划：周（id = null，numberOfWeek = 2，mondayMeal = Meal（id = null，名称= [对象对象]，价格= 0.0，类型= null），tuesdayMeal =膳食...”

我希望这是handleChange方法的问题，但实际上我很困惑地解决了这个问题而又不破坏正确更改numberOfWeek的功能。

所以我的问题是，如何在我的选择表单中将对象作为“ mondayMeal”等的值？