我有一個 react 組件，它將接受任意數量的文件，每個文件都有自己的語言。我希望能夠有一個按鈕，允許用戶根據需要添加任意數量的文件，每個文件都有自己的語言下拉菜單。我現在已經消除了文件上傳，因為我隔離了我遇到的問題。我已經創建了相當多的類似組件，沒有問題，但由于某種原因，我在使用這個組件時遇到了很大的麻煩。當我更改下拉列表中的語言時，我控制臺日志狀態，并看到該語言已在狀態中更新，但它不會在我的映射方法中的 DOM 上更新。這是我的代碼function App() {  const [files, setFiles] = useState([]);  const languages = ["English", "Spanish", "Arabic", "French"];  const handleAddFile = e => {    let newFiles = files;    newFiles.push({      content: null,      preview: null,      language: ""    });    setFiles(newFiles);  };  const changeLanguage = (event, index) => {    let newFiles = files;    newFiles[index].language = event.target.value;    setFiles(newFiles);  };  console.log(files);  return (    <div>      <p>Files</p>      <p>Upload a file for as many languages as you have</p>      {files.map((file, index) => (        <div key={index}>          <p>current language: {file.language}</p>          <select            value={file.language}            onChange={event => changeLanguage(event, index)}          >            <option value="" disabled>              Select a language            </option>            {languages.map((lang, i) => (              <option value={lang} key={i}>                {lang}              </option>            ))}          </select>        </div>      ))}      <button onClick={e => handleAddFile(e)}>+ Add File</button>    </div>  );}我還制作了一個代碼和框來重現這個問題，但它實際上使事情變得更加復雜。當我在本地運行代碼時，我能夠很好地添加文件實例，但是select元素上的語言不會在任何實例的DOM上更新。在代碼和框中，除非我在編輯器中進行編輯，否則DOM上不會更新任何內容，然后所有內容都會像我預期的那樣更新，包括語言。在所有情況下，狀態都是完全按照我的預期在控制臺上記錄的。沙盒中的組件與我本地的組件相同，盡管在本地它嵌入到另一個組件中。https://codesandbox.io/s/ed4fx?file=/src/App.js:0-1248