Redux状态管理：安全地向嵌套对象数组添加数据，避免“属性未定义”错误

addCityToCreatedWorld: (state, action) => {
  const { countryPk, newCity } = action.payload;
  // 查找匹配的国家
  const countryIndex = state.createdWorld.countries.findIndex(
    (country) => country.pk === countryPk
  );
  if (countryIndex >= 0) {
    // 尝试向该国家的cities数组中添加新城市
    // 如果state.createdWorld.countries[countryIndex].cities为undefined，此处会报错
    state.createdWorld.countries[countryIndex].cities.push(newCity);
  }
}

addCityToCreatedWorld: (state, action) => {
  const { countryPk, newCity } = action.payload;

  // 使用find方法获取国家对象
  const country = state.createdWorld.countries.find(
    (country) => country.pk === countryPk
  );

  if (country) {
    // 检查cities数组是否存在，如果不存在则初始化
    if (!country.cities) {
      country.cities = [];
    }
    // 现在可以安全地添加新城市
    country.cities.push(newCity);
  }
},

// 在添加国家时，预先初始化cities数组
addCountryToCreatedWorld: (state, action) => {
  const { country } = action.payload;

  state.createdWorld.countries.push({
    ...country,
    cities: [], // 在创建国家时就初始化cities数组
  });
},

// 修改后的addCityToCreatedWorld reducer，现在可以安全地假定cities数组存在
addCityToCreatedWorld: (state, action) => {
  const { countryPk, newCity } = action.payload;

  // 使用可选链操作符简化代码，因为我们现在假定cities数组已存在
  state.createdWorld.countries.find(
    (country) => country.pk === countryPk
  )?.cities.push(newCity);
},

const handleCitySubmit = async (event) => {
  event.preventDefault();

  const data = {
    name: cityName,
    picture: cityPicture,
    description: cityDescription,
    country: countryData.pk,
  };

  let cityUrl = `${process.env.REACT_APP_API_HOST}/api/cities`;
  let cityFetchConfig = {
    method: "post",
    body: JSON.stringify(data),
    headers: {
      "Content-Type": "application/json",
    },
  };

  const response = await fetch(cityUrl, cityFetchConfig);
  if (response.ok) {
    const createdCity = await response.json();
    // 成功创建城市后，派发action更新Redux状态
    dispatch(
      addCityToCreatedWorld({
        countryPk: countryData.pk, // 传递国家的主键
        newCity: createdCity,      // 传递新创建的城市数据
      })
    );
    setSubmitted(true);
  } else {
    console.error("创建城市失败:", response);
  }
};