Javascript 反应表单输入值未正确显示

我正在做一个项目，创建一个表单来创建旅游。一切正常，问题是表单输入值正在交换

前-

实际产出{tourName:'pune darshan'，地点：'999'，价格：'pune'} 预期输出：-{tourName:'pune darshan'，位置：'pune'，价格：'999'}

我不知道我哪里出了问题我被困在这里已经6个小时了

这是我试过的

表单组件

import React, { useState } from "react";
import { useDispatch } from "react-redux";
import { createTour } from "../../store/slices/tourSlice";
import "./createListing.scss";

const CreateListing = () => {
  const [tour, setTour] = useState({
    tourName: "",
    price: "",
    location: "",
  });
  const dispatch = useDispatch();
  const handleInput = (event) => {
    setTour((tour) => ({
      ...tour,
      [event.target.name]: event.target.value,
    }));
  };
  const handleSubmit = (event) => {
    event.preventDefault();
    dispatch(createTour(tour.tourName, tour.price, tour.location));
  };

  return (
    <div>
      <div className='form-controller'>
        <form action='' method='post' onSubmit={handleSubmit}>
          <div className='form-group'>
            <input
              type='text'
              className='form-control'
              name='tourName'
              placeholder='Enter Tour Name'
              onChange={handleInput}
              required
            />
          </div>
          <div className='form-group'>
            <input
              type='text'
              className='form-control'
              name='location'
              placeholder='Enter Tour Location'
              onChange={handleInput}
              required
            />
          </div>

          <div className='form-group'>
            <input
              type='number'
              className='form-control'
              name='price'
              placeholder='Enter Tour Cost'
              onChange={handleInput}
              required
            />
          </div>
          <div className='text-center'>
            <button type='submit theme-btn'>Create Tour</button>
          </div>
        </form>
      </div>
    </div>
  );
};

export default CreateListing;

这是模型文件

const mongoose = require("mongoose");

const tourSchema = mongoose.Schema(
  {
    tourName: { type: String },
    rating: { type: String, default: 4.5 },
    location: { type: String },
    price: { type: String, default: 999 },
  },
  { timestamps: {} }
);

const Tour = mongoose.model("Tour", tourSchema);
module.exports = Tour;

这是控制器代码

const createTours = async (req, res, next) => {
  const { tourName, price, location } = req.body;
  console.log(req.body);
  try {
    const newTour = new Tour({
      tourName,
      price,
      location,
    });
    newTour.save();
    res.status(200).json({
      status: "success",
      newTour,
    });
  } catch (error) {
    res.status(404).json({
      status: "failed",
      error: error,
    });
  }
};

---

您在createTour函数中以错误的顺序传递参数。 您应该更新调度行：

dispatch(createTour(tour.tourName, tour.location, tour.price));

---

秩序重要吗。我不知道。。。。感谢bdwyes，因为您可以通过值传递参数。如果您将tour对象作为参数传递，并将其（在createTour内部）分解为：

const{tourName，location，price}=tour它会工作的。
dispatch(createTour(tour.tourName, tour.location, tour.price));