React Select defaultValue 已设置但未出现答案

【问题标题】：React Select defaultValue is set but doesn't appearReact Select defaultValue 已设置但未出现
【发布时间】：2020-09-14 20:42:47
【问题描述】：

我什至尝试过手动设置文档中的默认值，但没有骰子。我不确定这是样式问题还是什么。所以下面我发布了我的截图。

  <Select
        components={animatedComponents}
        getOptionLabel={convertToLabel}
        getOptionValue={option => option.resource_name}
        isMulti
        onChange={changeEvent}
        options={users}
        theme={theme => ({
          ...theme,
          borderRadius: 0
        })}
        defaultValue={(props.value || []).map(convertToValue)}
        value={(props.value || []).map(convertToValue)}
      />

convertToValue函数

  const convertToValue = props => {
    return {
      label: `${props.name} ${props.family_name}`,
      value: props.resource_name
    };
  };

convertToLabel 函数

  const convertToLabel = props => {
    return `${props.name} ${props.family_name}`;
  };

changeEvent函数

  const changeEvent = (selectedOption, i) => {
    let option = {
      name: "reviewers",
      value: selectedOption
    };
    update({ target: option });
  };

用户和道具对象

users: 
  [
    {
      resource_name: "facebook_user1",
      name: "Joe",
      family_name: "Dirt"
    },
    {
      resource_name: "facebook_user2",
      name: "Trident",
      family_name: "White"
    }
  ]

props:
  {
    field: "placeholder",
    fieldType: "placeholderType"
    value:[
            {
              resource_name: "facebook_user1",
              name: "Joe",
              family_name: "Dirt"
            },
            {
              resource_name: "facebook_user2",
              name: "Trident",
              family_name: "White"
            }
          ]
  }

我在屏幕上看到的内容。

【问题讨论】：

如果不看更多代码就很难说（Select 是如何定义的？值 prop 是否正确传递给渲染 Select 组件的任何东西？），但我想知道它是否有事可做定义value 和defaultValue。通常定义value 用于受控组件，其中默认值将是value 等于的任何值。 defaultValue 通常用于不受控制的组件，您不会提供值。 (Docs on uncontrolled components.)
@hellojeffhall 是从反应选择库中定义的。哦，是的，我把两者都测试了，如果我设置的默认值是正确的。好的，所以我尝试按照反应选择文档所说的那样定义 defaultValue ，结果仍然相同：/
你能用 console.log(props.value) 看看传递给的内容吗？
props { field: "placeholder", fieldType: "placeholderType", value: { { resource_name: "facebook_user1", name: "Joe", family_name: "Dirt" }, { resource_name: "facebook_user2 "，名称：“三叉戟”，family_name：“白色”} } }
@hellojeffhall，cmets 的格式很奇怪。在主帖中查看上面编辑过的道具

标签： javascript reactjs redux react-select

【解决方案1】：

如果没有看到您选择的渲染器的实际 JSX，很难准确地判断您的问题是什么。以下是我看到的一些问题，查看您的问题，并对可能发生的事情进行了一些艰难的猜测。

您应该向我们展示您的 Select 实现的完整 JSX 渲染
你从来没有向我们展示你的 defaultValue 道具是什么样子的，但是请记住，value 应等于您的 options，不仅仅是option“价值”
您的标签和选项吸气剂方法签名应该是getOptionLabel = (option) => string 和 getOptionValue = (option) => string。你用过props，在您的实例中可能与父范围冲突。
你可能想要您的 convertToValue 方法签名也与这些签名一致。
您的 onChange 事件方法签名与 React-Select，可能会给你带来痛苦。请参阅我的 answer to this recent question 以获取相关帮助。

【讨论】：