反應 setState 不更新用戶界面上的 state

Question

我有一系列項目。 當我在我的用戶界面中輸入項目編號時，該項目將被添加到數組中並顯示出來。 我在控制台登錄並看到該項目正在添加到數組中，但未顯示在 UI 上。

例如，我目前將數組中的項目 1、2、3、4 作為 [1、2、3、4]。 當我添加 5 時，數組將更新為 [1、2、3、4、5]，但 5 未顯示在 UI 上。

這是相關代碼：

export const generateItemsState = (prevState, itemErrors, testItems) => {
   const { project, items, updatedProject, validationErrors } = prevState;
   const newState = {};
   
   if (itemErrors && itemErrors.length) {
      // irelevant
   } else {
      // no item errors
      newState.updatedProject = Object.assign(updatedProject, { items: testItems });
   }
   return newState;
}

setItemsInStateAfterValidation(itemErrors, changedTestItems) {
   const newState = generateItemsState(
      this.state,
      itemErrors,
      changedTestItems
   );

   if (!itemErrors || !itemErrors.length) {
      this.setState(newState, () => {
        this.props.onUpdate(
           this.state.updatedProject
        )
      });
   } else {
      this.setState(newState);
   }
}

請大神指點一下，謝謝！

Answer 1

你改變了 state：

  newState.updatedPorject = Object.assign(updatedProject, { items: testItems });

反應的第一條規則，不要改變 state。它應該是：

  newState.updatedPorject = Object.assign({}, updatedProject, { items: testItems });

或同等學歷：

newState.updatedPorject = { ...updatedPorject, items: testItems }