Question

目前为止，我可以通过setState在变量中显示下拉列表的选定值。但这是1个值。我想在setState中放置一个对象，以便以后显示。当前代码有效，直到我选择“ Treatment”（处理）下拉菜单，此后应用程序崩溃。

我想要的是，如果选择它作为下拉菜单，它将显示在中。有办法吗？

当前代码：

import React from "react";
import { useState } from 'react';
import { makeStyles } from "@material-ui/core/styles";

import styles from "assets/jss/material-dashboard-react/views/dashboardStyle.js";
import { Container } from "react-bootstrap";
import { Row } from "react-bootstrap";
import { Col } from "react-bootstrap";
import Close from '@material-ui/icons/Close';
import { render } from "react-dom";

const useStyles = makeStyles(styles);


export default function ChaskDesk() {

  const employee = ["Robin","Raoul","Joppe "];

  const service = [{
        id: 1,
        name: 'Knippen',
        price: 10.00

    },
    {
        id: 2,
        name: 'Scheren',
        price: 10.00
    },
    {
        id: 3,
        name: 'Wassen',
        price: 10.00

  }]
  const counting = [1,2,3,4,5,6];
  const gender = ["man", "vrouw", "kind"];
  const client = ["Passant"];

  const [employeeOrder, setEmployeeOrder] = useState('');
  const [serviceOrder, setServiceOrder] = useState([]);
  //const serviceOrder = [];
  const countingOrder = [];
  const genderOrder = [];
  const clientOrder = "";

  const payment = 0;
  const classes = useStyles();

    const handelChangeGender = function(event){
        genderOrder.push(event.target.value);
        console.log(genderOrder);
    };

    const handelChangeService = function(event){
        for(var i = 0; i < service.length; i++) {
            if (service[i].id == event.target.value) {

                setServiceOrder(service[i]);
                console.log(serviceOrder);
            }
        }

    };

    const handelChangeEmployee = function(event) {
        setEmployeeOrder(event.target.value)
      }




  return (
    <div>
      <Container className={classes.containerPixelActive}>
          <h3>Afrekenen</h3>
          <Row className={classes.tablePixelRow}>
            <Col md={8} className={classes.rowChashdesk}>
            <form>
            <Row>
                    <Col md={6}>
                    <label>
                        Klant:
                    </label>
                    <br/>
                    <select >
                        {
                            client.map(function(item, i){
                                return <option key={i} value={item}>{item}</option>
                            }) 
                        }
                    </select>
                    </Col>
            </Row>
            <Row>
                    <Col md={6}>
                <div className={classes.rowOfForm}>
                    <label>
                        Gender:
                    </label>
                    <br/>
                    <select onChange={handelChangeGender}>
                        {
                            gender.map(function(item, i){
                                return <option key={i} value={item}>{item}</option>
                            }) 
                        }
                    </select>
                </div>
                </Col>
            </Row>
                <Row>
                    <Col md={6}>
                    <div className={classes.rowOfForm}>
                        <label>
                            Behandeling:
                        </label>
                        <br/>
                        <select onChange={handelChangeService}>
                        {

                            service.map(function(item, i){
                                console.log(item);
                            return <option key={i} value={i}>{item.name}</option>
                            }) 
                        }
                    </select>
                    </div>
                    </Col>
                    <Col md={6}>
                    <div className={classes.rowOfForm}>
                        <label>
                            Medewerker:
                        </label>
                        <br/>
                        <select onChange={handelChangeEmployee}>
                        {
                            employee.map(function(item, i){
                                return <option key={i} value={item}>{item}</option>
                            }) 
                        }
                    </select>
                    </div>
                    </Col>
                </Row>
                {
                            serviceOrder.map(function(item, i){
               return <Row key={i} >
                    <Col md={6}>
                    <div className={classes.rowOfForm}>
                        <label>
                            Verkregen behandeling:
                        </label>
                        <br/>

                            <input type="text" name="name" value={item.name}/>

                    </div>
                    </Col>
                    <Col md={2}>
                    <div className={classes.rowOfForm}>
                        <label>
                            Aantal:
                        </label>
                        <br/>
                        <select>
                        {
                            counting.map(function(item, i){
                                return <option key={i} value={item}>{item}</option>
                            }) 
                        }
                    </select>
                    </div>
                    </Col>
                    <Col md={2}>
                    <div className={classes.rowOfForm}>
                        <label>
                            Prijs:
                        </label>
                        <br/>
                            <input type="text" name="name" />
                    </div>
                    </Col>
                    <Col md={2}>
                    <div className={classes.rowIcon}>
                        <Close size={20} ></Close>
                    </div>
                    </Col>
                </Row>
            })}
            </form>
            </Col>

            <Col md={3} className={classes.rowChashdesk}>
                <h5>Totaal overzicht</h5>
                <h6>Medewerker</h6>
                <p>{employeeOrder}</p>
                <h6>Behandeling</h6>

                <h6>Aantal</h6>
                <p>{countingOrder}</p>
                <h6>Klant</h6>
                <p>{clientOrder}</p>
                <h6>Te betalen</h6>
                <p>{payment}</p>
            </Col>

          </Row>
      </Container>
    </div>
  );

}

错误：

Answer 1

发生这种情况的原因是id数组中的service值为1、2和3，下拉选项的value s为0、1和2（数组索引）。因此，当您选择选项0时，它将找不到带有该id的服务并崩溃。

一种更简单的方法是使下拉选项中的value为整个服务对象，然后使用该状态设置状态：

<select onChange={handelChangeService}>
    {
        service.map(function(item){
               console.log(item);
               return <option key={item.id} value={item}>{item.name}</option>
        }) 
    }
</select>

和handleChangeService：

const handelChangeService = function(event){
    setServiceOrder(event.target.value); // this will be the service object
};

这使您的代码更加简单-无需通过for循环来搜索正确的对象。

在数组和映射结果中反应setState对象

1 个答案: