Redux Form：如何处理异步选择字段的默认选中状态？

嘿，我来帮你搞定这个初始加载的问题！

你当前的逻辑依赖CountryControl输入框的onChange事件来触发州数据加载，这就导致页面刚初始化的时候，因为没有用户触发的变更事件，StateControl根本不知道要去请求初始的州数据对吧？下面给你几个实用的解决思路和代码示例：

1. 让CountryControl在初始化时主动触发回调 #

在CountryControl获取完国家数据后，不要只渲染选项，还要默认选中第一个国家（或者用户已有预设的国家），然后主动调用父组件UserProfile传过来的回调函数，把选中的国家ID传递过去。这样就能在页面加载时直接触发StateControl的初始数据请求了。

比如函数组件的实现：

import { useEffect, useState } from 'react';

function CountryControl({ onCountryChange }) {
  const [countries, setCountries] = useState([]);
  const [selectedCountry, setSelectedCountry] = useState(null);

  useEffect(() => {
    // 模拟AJAX请求获取国家列表
    fetch('/api/countries')
      .then(res => res.json())
      .then(data => {
        setCountries(data);
        // 初始化选中第一个国家（如果有数据的话）
        if (data.length > 0) {
          const initialCountry = data[0];
          setSelectedCountry(initialCountry);
          // 主动调用回调，通知父组件更新选中的国家ID
          onCountryChange(initialCountry.id);
        }
      });
  }, []);

  const handleChange = (e) => {
    const targetCountry = countries.find(c => c.id === e.target.value);
    setSelectedCountry(targetCountry);
    onCountryChange(targetCountry.id);
  };

  return (
    <select value={selectedCountry?.id} onChange={handleChange}>
      {countries.map(country => (
        <option key={country.id} value={country.id}>{country.name}</option>
      ))}
    </select>
  );
}

2. 让StateControl监听国家ID的所有变化 #

不管是初始传入的国家ID，还是后续用户变更的，只要国家ID发生变化，StateControl就应该发起AJAX请求。我们可以把国家ID作为依赖项放到副作用钩子中：

import { useEffect, useState } from 'react';

function StateControl({ countryId }) {
  const [states, setStates] = useState([]);

  useEffect(() => {
    // 确保有有效的国家ID才发起请求
    if (countryId) {
      fetch(`/api/states?countryId=${countryId}`)
        .then(res => res.json())
        .then(data => setStates(data));
    }
  }, [countryId]); // 依赖countryId，初始值和变更都会触发这个钩子

  return (
    <select>
      {states.map(state => (
        <option key={state.id} value={state.id}>{state.name}</option>
      ))}
    </select>
  );
}

3. UserProfile的整合逻辑 #

在UserProfile里维护一个状态来保存当前选中的国家ID，把更新这个状态的函数传给CountryControl作为回调，同时把这个ID传给StateControl：

import { useState } from 'react';
import CountryControl from './CountryControl';
import StateControl from './StateControl';

function UserProfile() {
  const [selectedCountryId, setSelectedCountryId] = useState(null);

  return (
    <div className="user-profile">
      <h3>用户信息</h3>
      <div className="form-group">
        <label>选择国家：</label>
        <CountryControl onCountryChange={setSelectedCountryId} />
      </div>
      <div className="form-group">
        <label>选择州/省：</label>
        <StateControl countryId={selectedCountryId} />
      </div>
    </div>
  );
}

这样一套流程走下来，页面初始化时CountryControl会自动完成国家数据加载、默认选中、触发回调这一系列操作，UserProfile更新选中的国家ID后，StateControl就会立刻请求对应的州数据，完美解决初始加载无数据的问题。

如果你的项目用的是类组件，思路完全一致，只是把useEffect换成componentDidMount，useState换成this.state和this.setState就可以啦。

内容的提问来源于stack exchange，提问作者Michael Brown