當另一個組件發生更改時，如何更改組件的 state？

Question

當另一個組件發生更改時，如何更改組件的 state？

當 select 的 state 更改AssetType時， select AssetTypeCategory的值必須設置為0

  const handleAssetType = (e)=>{
    setAssetType(e.target.value),
    setAssetTypeCategory(0),
  }


  <div>
    <label htmlFor="AssetType>Asset Type:</label>
    {Array.isArray(state.AssetType) ? (
      <select
        name="AssetType"
        id="AssetType"
        value={state}
        onChange={handleAssetType }
      >
        <option key="0" value="0">
          -- PICK A ITEM--
        </option>
        {state.AssetType.map((x) => (
          <option key={x.id} value={x.id}>
            {x.name}
          </option>
        ))}
      </select>
    ) : null}
  </div>

Answer 1

您使用的是 class 還是功能組件？ 看起來您使用 class 組件，您無法更改 class 組件的 state 這種方式，使用 setState 並傳播“...”運算符。

Answer 2

代碼錯誤有兩個原因。

1 - 您不需要使用逗號來分隔功能。 代碼將是：

  const handleAssetType = (e)=>{
  
    setAssetType(e.target.value)
    setAssetTypeCategory(0)
  }

2 - 如果你執行setAssetType(e.target.value)值是一個 int，所以 AssetType 不是一個數組，會產生一個空白頁。

Answer 3

您應該以這種方式執行您的handleAssetType function。

const handleAssetType = (e)=>{
    setAssetType(e.target.value),
    setAssetTypeCategory(0),
  }

  <div>
    <label htmlFor="AssetType>Asset Type:</label>
    {Array.isArray(state.AssetType) ? (
      <select
        name="AssetType"
        id="AssetType"
        value={state}
        onChange={(e) => handleAssetType(e) }
      >
        <option key="0" value="0">
          -- PICK A ITEM--
        </option>
        {state.AssetType.map((x) => (
          <option key={x.id} value={x.id}>
                {x.name}
              </option>
            ))}
         </select>
      ) : null}
  </div>