React(Next.js)中如何分别控制每个属性？

Question

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

const test = () => {

const data = [
{TITLE : "Festival", PRIORITY : 3, STEP : 1},
{TITLE : "Headphone", PRIORITY : 2, STEP : 2},
{TITLE : "Mountain", PRIORITY : 1, STEP : 1}
]

return (
<>
{
data.map((info) => (
<div>

<div>{info.TITLE}</div>

<Select value={info.PRIORITY}>
  <MenuItem value={1}> 1 </MenuItem>
  <MenuItem value={2}> 2 </MenuItem>
  <MenuItem value={3}> 3 </MenuItem>
</Select>

<Select value={info.STEP}>
  <MenuItem value={1}> 1 </MenuItem>
  <MenuItem value={2}> 2 </MenuItem>
  <MenuItem value={3}> 3 </MenuItem>
</Select>

</div>
))
}
</>
)}

export default test;

在这段代码中，我试图分别控制 PRIORITY 值和 STEP 值。

我遇到了麻烦，因为在我的数据数组中，我有三个项目。因此，如果我添加

const [priority, setPriority] = useState(undefined);
const [step, setStep] = useState(undefined);

const priorityChange = (e) => {
  setPriority(e.target.value)
};

const stepChange = (e) => {
  setStep(e.target.value)
};

并将此值放入

<Select value={priority} onChange={priorityChange}></Select>
...

<Select value={step} onChange={stepChange}></Select>
...

此项，

每个项目都有相同的值，因此我无法控制每个 PRIORITY 和 STEP 值。

如何控制每个项目？我需要一些帮助。

我可能会拼错。请谅解！

Answer 1

首先，您的 data 数组未挂接到任何状态管理变量。因此，当您尝试显示最初来自数据数组的值，然后尝试在触发操作时显示来自 hooks 变量的更新数据时，很明显会导致一些冲突，因此无法显示更新的值。解决这个问题的一种方法是，将初始数据与状态挂钩相关联，然后相应地更新 data 数组。更新与触发的操作相对应的正确数据也很重要，因此在这里我们要确保集合中的每个对象都是唯一的，这可以通过为每个对象分配一个 id 属性来实现.再往上，我们可以找到对其执行操作的对象，改变属性值，然后使用状态挂钩函数重新构建数组，以使用正确的更新值重新渲染。请参考以下代码并阅读评论以获得更清晰的想法。

import React, { useState } from "react";
const App = () => {
  const [data, setData] = useState([
    { id: Math.random(), TITLE: "Festival", PRIORITY: 3, STEP: 1 },
    { id: Math.random(), TITLE: "Headphone", PRIORITY: 2, STEP: 2 },
    { id: Math.random(), TITLE: "Mountain", PRIORITY: 1, STEP: 1 }
  ]); //id attribute is added to each object to make sure every object in the array is unique.

  const priorityChange = (e, id) => {
   //This function should accept event and id arguments, to identify and update 
   //values correctly.
    const index = data.findIndex((item) => item.id === id); //find the index of the object (item) whose priority needs to be updated.
    const arr = [...data]; //Copy original array data to constant arr.

    arr[index].PRIORITY = e.target.value; //mutate the PRIORITY property's value

    setData([...arr]); //Set data to the new array with updated value.

    
  };

  const valueChange = (e,id) => {
    //This function should accept event and id arguments, to identify and update 
   //values correctly.
    const index = data.findIndex((item) => item.id === id); //find the index of the object (item) whose priority needs to be updated.
    const arr = [...data];

    arr[index].STEP = e.target.value; //mutate the STEP property's value

    setData([...arr]); //Set data to the new array with updated value.
  };
  return (
    <>
      {data.map((info) => (
        <div key={Math.random()}>
          <div>{info.TITLE}</div>

          <select
            value={info.PRIORITY}
            onChange={(e) => {
              priorityChange(e, info.id); //pass event object and id corresponding to each array object.
            }}
          >
            <option value={1}> 1 </option>
            <option value={2}> 2 </option>
            <option value={3}> 3 </option>
          </select>

          <select
            value={info.STEP}
            onChange={(e) => {
              valueChange(e, info.id); //pass event object and id corresponding to each array object.
            }}
          >
            <option value={1}> 1 </option>
            <option value={2}> 2 </option>
            <option value={3}> 3 </option>
          </select>
        </div>
      ))}
    </>
  );
};

export default App;

React(Next.js)中如何分别控制每个属性？

How do I control each property respectively in React(Next.js)?

javascript

reactjs

next.js

array.prototype.map