如何用使用效果替換組件更新並在其中設置 state 以做出反應

Question

在我的代碼中，我試圖將代碼從基於 class 的組件替換為基於 state 的組件。

我幾乎做到了，但這里建議使用 Effect 替換 componentDidUpdate ，稍后我在收到我在 state 中設置的更新道具后設置 state 然后更新組件。 當我刷新 window 時，它開始給我無限循環？

如果我在依賴數組中設置值 props 或 state 它開始給出一個無限循環，而

刪除數組給了我這個錯誤： -

第 69:8 行：React Hook useEffect 缺少依賴項：“markState”、“props.editMarkMode”、“props.studentMarkObject”和“props.studentName”。 要么包含它們，要么刪除依賴數組。 如果您在“setMarkState”調用中只需要“markState”，您也可以進行功能更新“setMarkState(m =>...)”react-hooks/exhaustive-deps

這是我的useEffect代碼。

useEffect(() => {
  if (markState.editMarkMode !== props.editMarkMode) {
    if (props.studentMarkObject !== null) {
      const updatedStateEditCondition = { ...markState };
      updatedStateEditCondition.isValid = true;
      updatedStateEditCondition.editMarkMode = true;
      updatedStateEditCondition.studentName = props.studentName;
      updatedStateEditCondition.semester.value =
        props.studentMarkObject.semester;
      updatedStateEditCondition.semester.touched = true;
      updatedStateEditCondition.semester.valid = true;
      setMarkState(updatedStateEditCondition);
      let array = [];
      let editMarks = props.studentMarkObject.marks;
      for (let index in editMarks) {
        let object = {};
        object.subject = {};
        object.subject.value = editMarks[index].subject;
        object.subject.touched = true;
        object.subject.valid = true;
        object.markObtained = {};
        object.markObtained.value = editMarks[index].markObtained;
        object.markObtained.touched = true;
        object.markObtained.valid = true;
        array.push(object);
      }
      setMarkState({ ...markState, marks: array });
    }
  }
}, []);

還有我的state

const [markState, setMarkState] = useState({
  semester: {
    value: "",
    touched: false,
    valid: false,
  },
  marks: [
    {
      subject: {
        value: "",
        touched: false,
        valid: false,
      },
      markObtained: {
        value: "",
        touched: false,
        valid: false,
      },
    },
  ],
  isValid: false,
  editMarkMode: false,
  studentName: "",
  addBtnDisable: false,
  subBtnDisable: true,
});

Answer 1

您是否嘗試過添加依賴項並更新 state 一次？

useEffect(() => {


if (markState.editMarkMode !== props.editMarkMode) {
    if (props.studentMarkObject !== null) {
      const updatedStateEditCondition = { ...markState };
      updatedStateEditCondition.isValid = true;
      updatedStateEditCondition.editMarkMode = true;
      updatedStateEditCondition.studentName = props.studentName;
      updatedStateEditCondition.semester.value =
        props.studentMarkObject.semester;
      updatedStateEditCondition.semester.touched = true;
      updatedStateEditCondition.semester.valid = true;

      let array = [];
      let editMarks = props.studentMarkObject.marks;
      for (let index in editMarks) {
        let object = {};
        object.subject = {};
        object.subject.value = editMarks[index].subject;
        object.subject.touched = true;
        object.subject.valid = true;
        object.markObtained = {};
        object.markObtained.value = editMarks[index].markObtained;
        object.markObtained.touched = true;
        object.markObtained.valid = true;
        array.push(object);
      }
      setMarkState({ ...updatedStateEditCondition, marks: array });
    }
  }
}, [markState, props.editMarkMode, props.studentMarkObject.marks]);