如何从 Redux 商店填充 Select 选项？

Question

我正在使用反应-select

我有一个可以创建新联系人的表单。在我的 redux 商店中，我有已经创建的组。当我单击 Select 显示选项时，我想从我的 redux 商店加载选项。

redux store中的"groups"只有一个值，即后台GroupModel中的title: String。

我明白 react-select 需要有一个标签：''，值：''

如果我自己创建一个数组并传递其中的值，它就可以正常工作。但是使用 redux 什么都不起作用。我在网上找不到任何答案，这对我来说似乎微不足道....

下面是我的组件

import React, { useState, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import PropTypes from 'prop-types';
import Select from 'react-select';
import { createContact } from '../../actions/index';
import { Button, Form, FormGroup, Input, Label } from 'reactstrap';
import Divider from '../common/Divider';

const ContactForm = ({ hasLabel }) => {
  const dispatch = useDispatch()

  // State
  const [contact, setContact] = useState({ 
    group: '',
})
  
  // Submit Handler
   const handleSubmit = e => {
    e.preventDefault()
    dispatch(createContact(contact))
   };

  // Change Handler
  const handleChange = e => {
    setContact({...contact, [e.target.name]: e.target.value})
  };
  
  // bringing in our state from redux
  const groups = useSelector((state) => state.groups)
  

  return ( 
  <>
    <Form onSubmit={handleSubmit}>
      <div>
        <FormGroup>
        <Label>
          Choose Group/List</Label>
            <Select
              name="group"
              options={groups}
              getOptionlabel={({title}) => title}
              getOptionValue={({_id}) => _id }
              onChange={() => {}}
              isMulti
            />
        </FormGroup>
      </div>
    </Form>
  </>
  );
};

ContactForm.propTypes = {
  
  hasLabel: PropTypes.bool
};

ContactForm.defaultProps = {
  layout: 'basic',
  hasLabel: false
};

export default ContactForm;

Answer 1

好的....所以我上面的解决方案非常正确。我遇到的问题是 getOptionlabel 需要是 getOptionLabel <--- 注意我忘了将标签中的 L 大写....

我希望需要在 redux 中使用 react-select 的人能找到这个 post 并且它会有所帮助。

所以基本上只需使用 useSelector or connect 引入你的 redux 状态，然后确保在 Select 组件

中使用下面的道具

getOptionLabel={({title}) => title}
getOptionValue={({_id}) => _id}

如何从 Redux 商店填充 Select 选项？

How do I populate Select Options from Redux store?

reactjs

react-select

redux