Reactjs 无法键入输入字段

我正在创建一个简单的待办事项列表。这里有一个更新表单的模式，我可以从状态中获取相关值，并将它们设置为输入字段值。那么我就不能编辑输入字段了。我认为问题在于onChange函数或value属性

import React from 'react'
import {useRef,useState,useEffect} from 'react'
import {FaTimes} from 'react-icons/fa'

export const Modal = ({edData,showModal,setShowModal,onAdd,setEd,tasks}) => {
      

     

        const [text,setText] = useState('')
        const[day,setDay] = useState('')
        const[reminder,setReminder] = useState(false)

    
      
        useEffect(() => {
            
                if(edData!=null){

                    for(let i=0;i<tasks.length;i++)
                    {
                      if(tasks[i].id===edData){
                        // console.log(tasks[i])
                        
                        setText(tasks[i].text)
                        setDay(tasks[i].day)
                        setReminder(tasks[i].reminder)
                      }
                    }
        
                }   
               

                // inputText.current.value = edData.text;
                // inputDay.current.value = edData.day;
                // inputReminder.current.value = edData.reminder;
             
             
          });
        
        const closeModal = () =>{
            setEd(null)
            setShowModal(prev=>!prev)
            setText('')
            setDay('')
            setReminder(false)

        }
    
  
    const onSubmit = (e) =>{
        e.preventDefault()

        if (!text){
            alert('Please add a task')
            return
        }
        onAdd({text,day,reminder})

        setText('')
        setDay('')
        setReminder(false)

        
       
            setShowModal(prev=>!prev)
        
       
    }
    return (
        <>
            {showModal? 
                <div className="background">
                    <div className="ModalWrapper" >
                       

                        <div className="ModalContent">
                            <h2 className="modalTitle">{edData==null? 'Add New Task':'Update Task'}</h2>
                        <form className="add-form" onSubmit={onSubmit}>
                            <div className="form-control">
                                <label htmlFor="">Task</label>
                                <input type="text"  placeholder="Add Task" name="" id=""   value={text} onChange={(e) => setText(e.target.value)}/>
                            </div>
                            <div className="form-control ">
                                <label htmlFor="">Date & Time</label>
                          



                                <input type="text"  placeholder="Add Date and Time" name="" id="" value={day} onChange={(e) => setDay(e.target.value)}/>
                            </div>
                            <div className="form-control form-control-check">
                                <label htmlFor="">Set Reminder</label>
                                <input type="checkbox" checked={reminder} name="" id="" value={reminder} onChange={(e) => setReminder(e.currentTarget.checked)}/>
                            </div>
                         
                            <input className="btn btn-block" type="submit" value="Save Task" />
                            
                            
                        </form  >

                        </div>
                       
                        <div className="CloseModalButton" onClick={closeModal}>
                            <FaTimes/>
                        </div>

                    </div>


                </div>
                
                
                
            : null}
        </>
    )
}

从“React”导入React
从“react”导入{useRef，useState，useffect}
从'react icons/fa'导入{FaTimes}
导出常量模式=（{edData，showmodel，setshowmodel，onAdd，setEd，tasks}）=>{
const[text，setText]=useState（“”）
const[day，setDay]=useState（“”）
常量[提醒，设置提醒]=useState（false）
useffect（（）=>{
如果（edData！=null）{
for（设i=0；i{
已设置（空）
设置显示模式（prev=>！prev）
setText（“”）
设定日（“”）
设置提醒（错误）
}
const onSubmit=（e）=>{
e、 预防默认值（）
如果（！text）{
警报（'请添加任务'）
返回
}
onAdd（{文本、日期、提醒}）
setText（“”）
设定日（“”）
设置提醒（错误）
设置显示模式（prev=>！prev）
}
返回(
{showModal？
{edData==null？'addnewtask'：'updatetask'}
任务
setText（e.target.value）}/>
日期和时间
setDay（e.target.value）}/>
设置提醒
设置提醒（e.currentTarget.checked）}/>
：null}
)
}

如果不将依赖项数组传递给

useffect

，在其中调用

setText

，并覆盖输入值，如果不希望在每次渲染时都运行该数组，请将空数组传递给

useffect

：

useEffect(() => {
  // ....
}, []);

---

我怀疑你的应用程序正在冻结，因为你正在通过在

useffect

hook中改变状态，在每个渲染上创建多个新渲染，并且没有声明依赖项。