单击按钮时以特殊顺序保存数据

IT技术 javascript reactjs
2021-02-24 09:57:14

我创建了一个应用程序，用户可以在其中向car 我的示例中的特定内容添加一些注释。用户必须能够添加评论并对汽车进行评分。

const App = () => {
  const [state, setState] = useState({ visible: false });
  const [myData, setMyData] = useState([]);

  const showModal = () => {
    setState({
      visible: true
    });
  };

  const handleOk = (e) => {
    setState({
      visible: false
    });
    console.log("all data", myData);
  };

  const handleCancel = (e) => {
    console.log(e);
    setState({
      visible: false
    });
  };

  return (
    <>
      <Button type="primary" onClick={showModal}>
        Open Modal
      </Button>
      <Modal
        title="Basic Modal"
        visible={state.visible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Data setMyData={setMyData} />
      </Modal>
    </>
  );
};

在console.log("all data", myData);我必须得到结果。
现在我有这一系列的项目：

const data = [
  {
    cars: [
      {
        carName: "bmw",
        carSpeed: 100
      }
    ],
    carCat: "4X4 car",
    carColor: "blue"
  },
  {
    cars: [
      {
        carName: "audi",
        carSpeed: 150
      }
    ],
    carCat: "fast car",
    carColor: "red"
  },
  {
    cars: [
      {
        carName: "mercedes",
        carSpeed: 170
      }
    ],
    carCat: "confort car",
    carColor: "white"
  }
];

当用户打开模态时，他将看到 3 个数据块，在那里他将能够添加评论和评分。
场景：如果用户在4X4 car块中添加数据（评分和评论），则以这种方式。然后保存数据，点击save按钮，数组应该以下一种方式改变：

const data = [
  {
    cars: [
      {
        carName: "bmw",
        carSpeed: 100
      }
    ],
    carCat: "4X4 car",
    carColor: "blue",
    rate: 3,  // depends by the user rate
    comments: ["user's text"] // depends by user
  },
  {
    cars: [
      {
        carName: "audi",
        carSpeed: 150
      }
    ],
    carCat: "fast car",
    carColor: "red"
  },
  {
    cars: [
      {
        carName: "mercedes",
        carSpeed: 170
      }
    ],
    carCat: "confort car",
    carColor: "white"
  }
];

如果用户不仅为一个块添加数据，而是为所有块添加数据，则数组中的所有数据都应根据以前的方式更改，具体取决于用户输入。
现在我保存时只得到一组数据。
问题：如何实现我上面描述的内容？感谢帮助。
演示：https : //codesandbox.io/s/hungry-margulis-4yx9b?file=/ Data.js: 60-489

1个回答

为了使您的场景工作，您应该按如下方式更新<Data />和<SetData />组件：

const Data = () => {
  const [cars, setCars] = useState(data);

  const setRate = (category, rate) => {
    const newCars = [...cars];
    let index = newCars.findIndex((c) => c.carCat === category);
    newCars[index] = Object.assign(newCars[index], { rate });

    setCars(newCars);
  };

  const setComment = (category, comment) => {
    const newCars = [...cars];
    let index = newCars.findIndex((c) => c.carCat === category);
    newCars[index] = Object.assign(newCars[index], { comment });

    setCars(newCars);
  };

  return (
    <div>
      {cars.map((i) => {
        return (
          <div key={i.carCat}>
            <span>{i.carCat}</span>
            <SetData
              setRate={(rate) => setRate(i.carCat, rate)}
              setComment={(comment) => setComment(i.carCat, comment)}
            />
          </div>
        );
      })}
    </div>
  );
};

const SetData = ({ setRate, setComment }) => {
  return (
    <div>
      <Rate onChange={setRate} />
      <input
        onChange={(e) => setComment(e.target.value)}
        placeholder="comment"
      />
    </div>
  );
};

这里最重要的部分是如何setRate和setCommentprops的<SetData />组件传递。

<SetData
  setRate={(rate) => setRate(i.carCat, rate)}
  setComment={(comment) => setComment(i.carCat, comment)}
/>

更新 1

如何创建评论数组，例如用户添加一次评论并单击确定按钮保存，然后再次打开模态并为该块添加另一个评论，并以这种方式创建评论数组.

基本上，您需要将状态进一步提升到<App />组件。使用此示例作为指导：https : //codesandbox.io

你能帮忙吗？
2021-04-29 09:57:14
很好，但是如何创建一系列评论，例如用户添加一次评论并单击OK按钮进行保存，然后再次打开模态并为该块添加另一个评论，并以这种方式创建一系列评论。你能帮忙吗？谢谢
2021-05-06 09:57:14
我有一个问题，为什么当我打开模态窗口并输入评论后，在输入评论后立即点击星星，文字消失了？谢谢
2021-05-14 09:57:14
我试过了newCars[index] = Object.assign(newCars[index], { comment: [...comment, comment] });，但它复制了每个字母作为一个评论。怎么修？
2021-05-16 09:57:14
其它你可能感兴趣的问题
上一篇在 JS 中使用 Canvas 为排序算法设置动画 下一篇使用 $.html() 时如何提高渲染性能