为什么我的所有列表项的状态都发生了变化，而不仅仅是一项？ React.js、状态、HandleChange、模态

如何解决为什么我的所有列表项的状态都发生了变化，而不仅仅是一项？ React.js、状态、HandleChange、模态

当使用我的模态更新用户信息时，当他们点击一个时间段时，信息会更新，但它会用相同的信息更新所有的时间段。我只想在模态表单完成后更改所选时间段的状态。为什么模态形式正在改变所有时隙的状态？

import React,{useState} from 'react'
import './App.css';



import Modal from 'react-modal';

Modal.setAppElement('#root')

function App() {

  //state for modal and user info
  const [modalisOpen,setModalisOpen] = useState(false);
  const [name,setName] = useState("");
  const [phoneNumber,setPhoneNumber ] = useState("")

  // handle submit form for the modal
  const handleSubmit = (e) => {
    e.preventDefault();
    setName(name)
    console.log(name)
    setPhoneNumber(phoneNumber)
    console.log(phoneNumber)
    
}


  
  
  return (
   

<div className="App">
       

      <h2>Hello world</h2>
    
      <Modal isOpen={modalisOpen} onRequestClose={() => setModalisOpen(false)}>
        <form onSubmit={handleSubmit}>
          <input type="text" required="required" name="name" placeholder="enter full name" value={name} onChange={(e)=> setName(e.target.value)}  />
          <input type="number" name="phoneNumber" required="required" maxLength="10" value={phoneNumber} placeholder="enter phone number" onChange={(e)=> setPhoneNumber(e.target.value)} />
          <button type="submit">Confirm</button>
          {/* <button onClick={()=> setModalisOpen(false)}>close</button> */}
        </form>

      </Modal>
      

      {/* slot 1 */}
      <div className="time-slot-list">
        <ul>
          {name ? <li  className="time-slot redBg" onClick={()=> setModalisOpen(true)}>
            9:00am
           
            <p>{name}</p>  
          </li> :  <li className="time-slot" onClick={()=> setModalisOpen(true)}>
            9:00am
           
            </li>
        }
        {/* slot 2 */}
           {name ? <li className="time-slot redBg" onClick={()=> setModalisOpen(true)}>
            10:00am
            
            <p>{name}</p>  
          </li> :  <li className="time-slot" onClick={()=> setModalisOpen(true)}>
            10:00am
            
            </li>
          }
         </ul>
      </div>

    </div>
  );
}






export default App;

解决方法

我建议为槽创建一个 name/phoneNumber 值数组，并使用索引来确定您要为其打开模态。

const [modalIndex,setModalIndex] = useState(null);
const [slots,setSlots] = useState([
  {
    id: 0,name: "",phoneNumber: ""
  },{
    id: 1,phoneNumber: ""
  }
]);

由于您将 value 和 onChange 属性附加到每个输入，我假设您想要完全控制输入，因此创建一个更改处理程序回调并使用当前选定的索引来匹配正在更新的插槽.

const handleChange = (e) => {
  const { name,value } = e.target;
  setSlots((slots) =>
    slots.map((slot,i) =>
      i === modalIndex
        ? {
            ...slot,[name]: value
          }
        : slot
    )
  );
};

更新模态以使用插槽状态。

<Modal
  isOpen={modalIndex !== null}
  onRequestClose={() => setModalIndex(null)}
>
  <form onSubmit={handleSubmit}>
    <input
      type="text"
      required="required"
      name="name"
      placeholder="enter full name"
      value={slots[modalIndex]?.name}
      onChange={handleChange}
    />
    <input
      type="number"
      name="phoneNumber"
      required="required"
      maxLength="10"
      value={slots[modalIndex]?.phoneNumber}
      placeholder="enter phone number"
      onChange={handleChange}
    />
    <button type="submit">Confirm</button>
  </form>
</Modal>

要打开模态并更新特定插槽，请使用 setModalIndex 状态更新器函数设置特定插槽索引。

<ul>
  {["9:00am","10:00am"].map((time,index) => (
    <li
      key={index}
      className={`time-slot ${slots[index].name ? "redBg" : ""}`}
      onClick={() => setModalIndex(index)}
    >
      {time}
      <p>{slots[index].name}</p>
    </li>
  ))}
</ul>