我想使数据编辑功能后，点击一个按钮。当点击按钮，数据应该出现在表格中，然后可以编辑。
但当我尝试这样做时，数据出现在表单中，但无法编辑，或者表单为空，其中没有必要的数据。
实现此功能的最佳方法是什么？

function Menu() {
    const [word, setWord] = useState('');
    const [translate, setTranslate] = useState('');
    const [note, setNote] = useState('');
    let [searchInput, setSearchInput] = useState('');
    const [data, setData] = useState(SavedList);
    const [warn, setWarn] = useState(false);
    const [editpost, setEditpost] = useState([]);
    const [editp, setEditp] = useState(false);
    const [filteredData, setFilteredData] = useState([]);
     const editPost =(id)=>{
      let a = data[id]
      const post = {
            word: a.word,
            translate: a.translate,
            note: a.note,
      };
      setEditp(true)
      setEditpost(post)
       console.log(editpost)
       console.log(post)
       
     }
    return(
       <div className="content">
        <Routes>
          <Route path="/" element={<Layout onSearch={()=>onSearchF()} data={data}/>}>
            <Route
              path="saved"
              element={<Saved editpost ={editpost} editp={editp} data={data} edit={editPost}  del={deletePost} handleWord={handleWord}/>}
            />  
          </Route>
        </Routes>
        <div>
          <Outlet />
        </div>
      </div>
    )
}
export default Menu;

这里有一个按钮和一个表格（应该有信息）

function Saved({data, del, edit, editp, editpost}) {
  const[newWord, setNewWord] = useState(editpost.word);
  const [newTranslate, setNewTranslate] = useState(editpost.translate);
  const [newNote, setNewNote] = useState(editpost.note);
    const dt = data
    const sl = dt.map((sl, id) => {
        return (
          <div className="saved-card" key={id}>
            <div className="content">
              <p>{sl.word}</p>
              <p>{sl.translate}</p>
              <p>{sl.note}</p>
            </div>
            <div className="btn-block">
              <button onClick={()=>edit(id)}
                className="redo-btn"
              >
                redo
              </button>
            </div>
          </div>
        );
      });
    let dataLength = data.length
    return(
        <div>
        <div className="saved-inner">
          {dataLength>=1 ? <div className="saved-list">{sl}</div> : <Link className="main-btn" to="/addcard">Save your first word</Link>}
        </div>
        <div className="edit">
          {editp? <form >
          <input onChange={(e)=>setNewWord(e.target.value)} value={newWord} type="text" placeholder="write your word"/>
            <input onChange={(e)=>setNewTranslate(e.target.value)} value={newTranslate} type="text" placeholder="write translate"/>
            <textarea onChange={(e)=>setNewNote(e.target.value)} value={newNote} placeholder="place for your notes"></textarea>
          </form> : ''}
        </div>
      </div>
    )
}
export default Saved