所以我創建了這個代碼，它在提交表單后用輸入值創建li元素。但問題是，當它創建li，并且您再次開始輸入時，它開始覆蓋所有的li元素

import './App.css';

function App() {

  const [form, setForm] = useState("")
  let [tobuy, setTobuy] = useState([])
  const listOfLi = tobuy.map((i) => <li key={i}>{form}</li>);

  function handleSubmit(event) {
    event.preventDefault();
    setTobuy( [...tobuy , form])
    event.target.reset()
  }

  function handleChange(event) {
    setForm(event.target.value)
  }

  return (
    <div className='page'>

      <div className='heading'>
        Shopping List
      </div>

      <div className='buy-box'>

        <div className='to-buy'>Items to buy</div>

        <form className='form' onSubmit={handleSubmit}>
          <input type="text" className='input' required onChange={handleChange}/>
          <button type="button" className='button' onClick={handleSubmit}>Add</button>
        </form>

        <div>
          {listOfLi}
        </div>

      </div>
      

    </div>
    
  );
}

export default App;

您的表單狀態被用于每個li元素的值，每次更改輸入時都會調用setForm。因此，當在輸入中鍵入內容時，form會更新為input元素的當前狀態。

React將在輸入改變時重新呈現組件，因此使用form的當前值重新呈現所有lis。因為這也隨著每個輸入的變化而變化，所以所有的lis都將當前值保存在表單中。

您正在訪問地圖中所需的值。請嘗試使用該值代替當前表單值。