使用redux格式时，初始值不会显示在react-select中

npm install react-select redux react-redux

// selectReducer.js

const initialState = {
  selectedOption: null, // 初始值为null
};

const selectReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_SELECTED_OPTION':
      return {
        ...state,
        selectedOption: action.payload,
      };
    default:
      return state;
  }
};

export default selectReducer;

// selectActions.js

export const setSelectedOption = (option) => ({
  type: 'SET_SELECTED_OPTION',
  payload: option,
});

// SelectContainer.js

import React from 'react';
import { connect } from 'react-redux';
import Select from 'react-select';
import { setSelectedOption } from './selectActions';

const SelectContainer = ({ selectedOption, setSelectedOption }) => {
  const options = [
    { value: 'option1', label: 'Option 1' },
    { value: 'option2', label: 'Option 2' },
    { value: 'option3', label: 'Option 3' },
  ];

  const handleChange = (option) => {
    setSelectedOption(option);
  };

  return (
    <Select
      options={options}
      value={selectedOption}
      onChange={handleChange}
    />
  );
};

const mapStateToProps = (state) => ({
  selectedOption: state.select.selectedOption,
});

const mapDispatchToProps = {
  setSelectedOption,
};

export default connect(mapStateToProps, mapDispatchToProps)(SelectContainer);

// App.js

import React from 'react';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import selectReducer from './selectReducer';
import SelectContainer from './SelectContainer';

const store = createStore(selectReducer);

const App = () => {
  return (
    <Provider store={store}>
      <SelectContainer />
    </Provider>
  );
};

export default App;