React Select组件显示旧标签问题：同步另一数组更新值

问题原因 #

你当前的Select组件将value绑定为字符串类型的label，但多数Select组件（如react-select）需要value匹配options中的完整选项对象，或通过唯一标识（如id）来关联选项。当前xxx对象的label为BaconY，而options中对应id的label是BaconX，组件无法通过字符串label匹配到options中的正确选项，因此直接显示xxx自身的旧label，而下拉菜单直接读取options所以显示正确。

解决方案 #

方案1：绑定匹配的完整选项对象 #

修改Select的value属性，直接传入options中匹配id的选项对象：

{item && item.Foods && item.Foods.length > 0 && item.Foods.map((xxx, index) => {
  const matchedOption = options.find(opt => opt.id === xxx.id);
  return (
    <React.Fragment key={`${xxx.id}~${index}`}>
      <Select
        isSearchable={true}
        ref={myRef}
        menuPortalTarget={document.body}
        placeholder="Select Foods"
        name="Foods"
        value={matchedOption || xxx}
        options={options}
      />
    </React.Fragment>
  );
})}

方案2：通过唯一标识关联选项 #

如果你的Select组件支持自定义选项匹配规则，可设置getOptionValue和getOptionLabel，用id作为唯一匹配依据：

{item && item.Foods && item.Foods.length > 0 && item.Foods.map((xxx, index) => {
  return (
    <React.Fragment key={`${xxx.id}~${index}`}>
      <Select
        isSearchable={true}
        ref={myRef}
        menuPortalTarget={document.body}
        placeholder="Select Foods"
        name="Foods"
        value={xxx}
        options={options}
        getOptionValue={(option) => option.id}
        getOptionLabel={(option) => option.label}
      />
    </React.Fragment>
  );
})}

额外注意事项 #

• 确保options是通过React状态（如useState）管理的，当options更新时会触发组件重新渲染。
• 避免用xxx对象直接作为key（key={${xxx}~${index}}），因为对象转字符串会得到[object Object]，应该用唯一标识如xxx.id来生成key，保证列表项的正确复用。

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