ReactHook“useState”被稱為內部條件，但不是條件在內部

閱讀此頁面后： https ://typeofnan.dev/fix-the-react-hook-is-called-conditionally-error-in-react/

我試圖找到錯誤，但我不斷收到錯誤：

有條件地呼叫 React Hook “useState”

這里的代碼：

export const PageSettings = (props) => {
  const {
    table,
    listviewFields,
    t,
    tableCrud,
    updatePageSettingsFields,
    templates,
    visibleFields,
    visibleFieldsToggle,
  } = props;

  let aFields = [];
  let aFieldsForSortable = [];
  for (const [keyName, fieldSet] of Object.entries(listviewFields)) {
    const listViewField = table.listview.fields[keyName];
    let fieldSource;
    if (listViewField.virtual) {
      // virtual don't throw error, must have always label
      fieldSource = listViewField;
    } else {
      fieldSource = table.fields[keyName];
    }
    const field = table.fields[keyName];

    const { aColHeaderToAdd, titleFieldFull, printCell } = getHeaderToAdd(
      listViewField,
      keyName,
      fieldSource,
      table,
      props,
      t,
      templates,
      tableCrud,
      fieldSet,
      listviewFields
    );

    if (printCell) {
      aFieldsForSortable.push({ id: keyName, name: titleFieldFull });
      aFields.push(
        <div
          key={keyName}
          style={{
            fontSize: "12px",
            minWidth: "90px",
            maxWidtht: "150px",
            bgColor:
              listviewFields && listviewFields[keyName].invisible === true
                ? "black"
                : "green",
          }}
        >
          <input
            type="checkbox"
            name={keyName}
            style={{}}
            checked={
              !listviewFields[keyName].invisible ||
              listviewFields[keyName].invisible === false
                ? true
                : false
            }
            onChange={updatePageSettingsFields}
          />
          <label htmlFor={keyName}>{titleFieldFull}</label>
        </div>
      );
    }
  }

  const [stateList, setStateList] = useState([aFieldsForSortable]);

  return (
    <div
      style={{
        display: "flex",
        flexDirection: "row",
        alignItems: "center",
        color: "#FFFFFF",
        paddingTop: "20px",
        width: "100%",
        backgroundColor: visibleFields ? "#555555" : null,
      }}
    >
      <a onClick={visibleFieldsToggle}>
        <ShowIcon icon="eyecheck" color="#5f97c1" />
      </a>
      <ReactSortable list={stateList} setList={setStateList}>
        {state.map((item) => (
          <div key={item.id}>{item.name}</div>
        ))}
      </ReactSortable>
      {visibleFields && aFields}
    </div>
  );
};

const getHeaderToAdd = (
  listViewField,
  keyName,
  fieldSource,
  table,
  props,
  t,
  templates,
  tableCrud,
  fieldSet,
  listviewFields
) => {
  let colsHeader = [];
  let printCell = true;
  // Logic Twin TT103
  let titleField;
  let titleFieldFull;
  // fieldSource can be not exist, by example , virtual field: customers.listview.addresses2
  if (
    fieldSource &&
    fieldSource.fieldDisplayedOptions &&
    fieldSource.fieldDisplayedOptions.separatorsubfield === "col"
  ) {
    /*
  not call main field, but the subfields to get label
   */
    for (const [nameSubField, objField] of Object.entries(
      fieldSource.fieldDisplayedOptions.subfields
    )) {
      titleField = resolveListLabel(table.related[keyName].table, nameSubField); // look for related table
      titleFieldFull =
        titleFieldFull   (titleFieldFull ? " " : "")   titleField;
      colsHeader.push(
        <div className="cell" key={nameSubField   keyName}>
          {t(titleField)}
        </div>
      );
    }
  } else {
    if (listViewField.module) {
      if (
        !resolvePathObj(
          props,
          "myState.app.appSettings.modules."   listViewField.module,
          true
        )
      ) {
        //if (keyName === 'dateaccounting') console.log('module not compat', props);
        printCell = false;
      }
    }
    if (listViewField.templates) {
      if (
        !intersection(
          listViewField.templates,
          templates,
          props.tableCrud,
          keyName
        )
      ) {
        //if (keyName === 'dateaccounting') console.log('no template');
        printCell = false;
      }
    }
  }
  /*if (keyName === 'dateaccounting') {
    console.log('module, propstemplates, templates', listViewField.module, templates, listViewField.templates);
  }*/

  if (printCell) {
    titleFieldFull = resolveListLabel(tableCrud, keyName);

    // try find short word, if not exist then get normal word
    let title = t(titleFieldFull   "_short");
    if (title === titleFieldFull   "_short") title = t(titleFieldFull);
    titleFieldFull = title;

    colsHeader.push(
      <div className="cell" key={keyName}>
        {titleFieldFull}
      </div>
    );
  }
  return { titleFieldFull, printCell, colsHeader };
};

謝謝

uj5u.com熱心網友回復：

您正在傳遞aFieldsForSortable初始化為的引數，[]然后有條件地（在 if 陳述句中），您正在為該值撰寫資訊。

我建議將使用狀態設定為空，如果您要更改它，請呼叫該setStateList方法。例如，

const [stateList, setStateList] = useState([]);

....

if (printCell) {
    const aFieldsForSortable = stateList;
    aFieldsForSortable.push({ id: keyName, name: titleFieldFull });
    setStateList(aFieldsForSortable);

uj5u.com熱心網友回復：

你違反了鉤子規則。

鉤子規則說：

僅在頂層
呼叫 Hook 不要在回圈、條件或嵌套函式中呼叫 Hook

useState()呼叫應該在函式的頂部。如果您的初始狀態基于復雜計算，那么您應該在內部進行該計算useEffect()（使用 設定值setStateList()），否則每次重新渲染組件時都會重新運行復雜計算。

標籤：

上一篇：型別錯誤“無法讀取未定義的屬性”-在React中訪問API

下一篇：連接不同簽名的陣列時，沒有多載匹配TypeScript中的此呼叫