所以我創(chuàng)建了這個(gè)代碼，它在提交表單后用輸入值創(chuàng)建li元素。但問(wèn)題是，當(dāng)它創(chuàng)建li，并且您再次開(kāi)始輸入時(shí)，它開(kāi)始覆蓋所有的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;

您的表單狀態(tài)被用于每個(gè)li元素的值，每次更改輸入時(shí)都會(huì)調(diào)用setForm。因此，當(dāng)在輸入中鍵入內(nèi)容時(shí)，form會(huì)更新為input元素的當(dāng)前狀態(tài)。

React將在輸入改變時(shí)重新呈現(xiàn)組件，因此使用form的當(dāng)前值重新呈現(xiàn)所有l(wèi)is。因?yàn)檫@也隨著每個(gè)輸入的變化而變化，所以所有的lis都將當(dāng)前值保存在表單中。

您正在訪問(wèn)地圖中所需的值。請(qǐng)嘗試使用該值代替當(dāng)前表單值。