我在調試這種情況時遇到問題。我正在嘗試從 API 提供的數組中刪除索引。在檢查其父級的道具更改后，我將其存儲在父級狀態中。這里一切都很好。我可以將任何道具更改存儲在父表單狀態中。父表單映射templateData中的所有內容，我確定它是什么類型，然后根據需要渲染一個組件。刪除按鈕將始終只在DynamicInputGroup中，因此我通過道具向下傳遞該功能。在DynamicInputGroup中，我需要映射從父級傳遞的數組，然后映射該數組中的對象以顯示每個單獨的輸入。再次使用傳遞下來的道具來確定要渲染的輸入，與父級相同。這是出了問題的地方。當我單擊刪除時，假設索引 2（共 5 個），我看到該索引在狀態中被刪除，但呈現的是索引 5 被刪除。我不確定該怎么做。我已經完成研究并閱讀了密鑰發揮作用？我試圖將渲染函數中的一個變量設置為狀態，這樣它就會刷新，但什么也沒有。最后一個索引總是被刪除。哈！家長表格this.state = {    templateData: []}removeGroupItem = (index, inputName ) => {    let group = `${inputName}__group`    const newState = this.state;    if (index === -1) return;    newState.templateData[group].splice(index, 1);    console.log(newState) // THIS SHOWS CORRECT STATE    this.setState(newState);}render() {    return (      {Object.keys(this.state.templateData).map((name, key) => {          let data = { // SETTING inputType TO DISPLAY CORRECT COMPONENT }          return (              <Fragment key={key}>                  {data.inputType == 'input' && <DynamicTextInput {...data} />}                  {data.inputType == 'rtf' && <DynamicRTF {...data}  />}                  {data.inputType == 'img' && <DynamicImageUpload {...data} />}                  {data.inputType == 'group' && <DynamicInputGroup {...data} removeGroupItem={this.removeGroupItem} />} // COMPONENT THAT HOLDS REMOVE BUTTON              </Fragment>          )      })}    )}動態輸入組組件this.state = {    value: []}componentDidMount() {    this.setState({ value: this.props.value })}componentDidUpdate(prevProps) {    if (this.props.value !== prevProps.value) {        this.setState({            value: this.props.value        })    }}