Fix.map 不是功能組件中的 function

Question

我有一個文本框，我在其中將數組項設置為文本框，並將其用作下拉菜單。 我的代碼有效，我可以看到下拉列表中的項目，但是當我單擊除第一項之外的任何其他項目時，我得到錯誤組。map 不是 function。 我將數組從 API 設置為我的組，然后我嘗試將 map 需要的項目放入文本框中。 請在下面查看我的代碼並幫助我修復它。

我在這里將我的 state 設置為一個空數組

const [groups, setGroups] = useState([]);

const handleChange = event => {
setGroups({
  ...groups,
  [event.target.name]: event.target.value
});
};

我在這里處理我的 API 電話

axios
  .post('http://', formData, config)
  .then((response) => {
    console.log(response.data)
    setGroups(response.data);
  })
  .catch((error) => {
    console.log(error.response);
  });
}, []);

我使用我的數據進行渲染以顯示在此處的下拉列表中

          <TextField
              fullWidth
              label="Select Group"
              margin="dense"
              name="groups"
              onChange={handleChange}
              required
              select
              // eslint-disable-next-line react/jsx-sort-props
              SelectProps={{ native: true }}
              value={groups.name}
              variant="outlined"
            >
              {groups.map(option => (
                <option
                  key={option.id}
                >
                  {option.name}
                </option>
              ))}
            </TextField>

Answer 1

這是因為 axios 未完成請求，並且當您嘗試通過 map 對 map25867639E2AB914 進行更新時，您的 state 尚未更新在 map 附近試試這段代碼：

{groups && groups.map(option => (
     <option
      key={option.id}
     >
       {option.name}
     </option>
 ))}

僅當groups存在時，map 才會在陣列上使用 go

Answer 2

嘗試添加一個新的 state 變量來存儲所選組。

const [selected, setSelected] = useState();

您的 handleChange function 將變成類似

const handleChange = event => {
  setSelected(event.target.value);
};

並且您的 TextField 組件將更改其值以匹配相應的 state 變量：

            <TextField
              fullWidth
              label="Select Group"
              margin="dense"
              name="groups"
              onChange={handleChange}
              required
              select
              // eslint-disable-next-line react/jsx-sort-props
              SelectProps={{ native: true }}
              value={selected}
              variant="outlined"
            >
              {groups.map(option => (
                <option
                  key={option.id}
                >
                  {option.name}
                </option>
              ))}
            </TextField>

Answer 3

如果它是 object 你可以將它轉換為 api 中的數組

 Object.entries(images)

然后在您使用 res.data 請求數據集數據時也在客戶端發送此響應，否則它將是巨大的 object .....