React中UI数据加载不稳定但控制台输出正常的问题求助

问题根源分析 #

• 异步操作未正确等待：你用await data.map(...)但map不支持异步函数的等待逻辑，内部的getListItems异步请求会并行执行，tempDropdownLists还没收集完所有下拉数据就可能触发状态更新；而且每个下拉请求完成后都会调用一次setDropdownLists，状态更新顺序完全依赖请求返回速度，导致UI看到的数组长度不稳定。
• 状态更新逻辑冗余：循环内多次调用setDropdownLists，但React状态更新是异步的，连续更新可能被合并或覆盖，最终状态和控制台打印的内存数组不一致（控制台打印的是实时内存数据，状态更新存在延迟）。
• 渲染时无存在性校验：直接访问dropdownLists.filter(...)[0].listItems，如果对应下拉数据未加载完成，filter返回空数组，[0]为undefined，会直接抛出渲染错误。

修复代码及步骤 #

1. 统一等待所有异步请求：用Promise.all收集所有下拉请求的Promise，等全部请求完成后再统一处理数据并更新状态。
2. 单次更新状态：所有下拉数据收集完毕后，一次性调用setDropdownLists，确保状态是完整的。
3. 渲染增加安全校验：用find查找对应列表，配合可选链?.避免未找到数据时的报错。

修复后的完整代码：

const App = (props) => {
  const formName = "user_form"
  const [formElements, setFormElements] = useState([]);
  const [dropdownLists, setDropdownLists] = useState([])

  const getFormData = async () => {
    try {
      const response = await axios.get([myurl]); 
      const data = await response.data;
      setFormElements(data);

      // 筛选出需要请求下拉数据的组件，收集所有请求Promise
      const dropdownPromises = data
        .filter(item => item.ui_component_type === "select")
        .map(async (item) => {
          const query = `SELECT DISTINCT ${item.ui_data_field} from ${item.ui_data_table}`;
          const response = await axios.post([myurl], { query });
          const listItems = response.data;
          return { name: `${item.ui_id}_list`, listItems };
        });

      // 等待所有请求完成，获取完整的下拉列表数组
      const tempDropdownLists = await Promise.all(dropdownPromises);
      setDropdownLists(tempDropdownLists);
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    getFormData();
  }, [props]);

  return (
    <div className="d-flex flex-column">
      <p>{JSON.stringify(dropdownLists.length)}</p>
      <form>
        {formElements.map((item, index) => (
          <div key={item.ui_id || index} className="form-floating m-3">
            {item.ui_component_type === "input" && (
              <>
                <input id={item.ui_id} name={item.ui_name} className={item.ui_classname} />
                <label className="form-label">{item.ui_label}</label>
              </>
            )}
            {item.ui_component_type === "select" && (
              <>
                <select id={item.ui_id} name={item.ui_name} className={item.ui_classname}>
                  {/* 先找到对应列表，存在则渲染选项 */}
                  {dropdownLists.find(list => list.name === `${item.ui_id}_list`)?.listItems?.map((listItem, listItemIndex) => (
                    <option key={listItemIndex} value={listItem}>
                      {listItem}
                    </option>
                  ))}
                </select>
                <label className="form-label">{item.ui_label}</label>
              </>
            )}
          </div>
        ))}
      </form>
    </div>
  )
}

export default App

额外优化建议 #

• 给useEffect的依赖项做精确控制，不要直接传props，而是传入props中具体触发重请求的字段，避免不必要的重复请求。
• 增加加载状态，请求数据时显示加载动画，提升用户体验。
• 优先用item.ui_id这类唯一标识作为key，替代index，避免组件顺序变化时的渲染异常。

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