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

Posted 2023-02-14

【中文标题】如何在 React(Next.js) 中分别控制每个属性？

【英文标题】：How do I control each property respectively in React(Next.js)?

【发布时间】：2022-01-21 00:00:32

【问题描述】：

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 值。

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

我可能拼错了。请理解！

【问题讨论】：

你能在codesandbox.io 上提供一个最小的例子吗？有点难理解

@TusharShahi 好的。我正在努力。

@TusharShahi codesandbox.io/s/inspiring-kirch-38fil?file=/src/App.js 这里！

嘿亚丁，谢谢。但是您的示例没有 onchange 函数，因此我们看不到问题所在

@TusharShahi 如果您阅读了我的描述，您就会知道为什么我没有在每个选择标签上给出 onChange 事件！

【参考方案1】：

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

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;