如何从选择选项中更新状态？

Question

我的应用程序包含主要组件，该组件在列表中呈现从商店接收的数据。子组件允许选择一个选项。并且在用户做出选择（下拉列表中的选项之一）后，应相应更新存储中的对象。此外，当我刷新页面时，我希望更新的列表会被渲染。

主组件（TableMain）：

 import OperationSelect from "./operationSelect";

 const mapStateToProps = (store) => {
      return {itemsProp: store.fetch.items}
 };

class TableMain extends React.Component {
    // constructor

     getOperationItems = function () {
         this.props.itemsProp.map((item, index) => {
            return (
                <li>key={index} item={item}</li>
            );
         });
     };

    render() {
        return <div>
            {this.getOperationItems()}
            <OperationSelect />
              </div>;
        }
    }

  export default connect(mapStateToProps)(TableMain)

初始状态：

 export default {
     items: [
              {
               'Date': null,
               'Operation': 'revenue',
              }
           ]
    }

更新操作：

 export function selectOperation(payload) {
     return {
         type: 'SELECT',
         payload: payload,
       };
  }

我省略了 get-action，因为它运行良好。

更新减速器：

  import initialState from '../constants/initialState';

  export default function update(state = initialState, action) {
     switch (action.type) {
         case 'SELECT':
            return {
               ...state,
               [action.payload.key]: action.payload.value
             };
        default:
            return state;
      }
 } 

组合减速器：

 import {combineReducers} from 'redux';
 import fetch from '../reducers/fetchReducer';
 import update from '../reducers/updateReducer';

 const rootReducer = combineReducers({fetch, update});
 export default rootReducer;

提供选择操作的子组件：

const mapDispatchToProps = (dispatch) => {
    return {
         selectOperation: (input) => dispatch({type: 'SELECT', payload: input})
      }
 };

 const mapStateToProps = (store) => {
      return {itemsProp: store.fetch.items}
 };

class OperationSelect extends React.Component {
   // constructor

    handleChange(event) {
         this.props.selectOperation({
            key: 'Operation',
            value: event.target.value
         });
       console.log(`items = ${JSON.stringify(this.props.itemsProp)}`);
  }; 

    render() {
        return (
           <label>
               <select onChange={this.handleChange}>
                   <option selected="select value"></option>
                   <option value="value1">Option1</option>
                   <option value="value2">Option2</option>
               </select>
           </label>
        );
     }
   }

   export default connect(mapStateToProps, mapDispatchToProps)(OperationSelect).

容器组件存在，但省略。

当我只是加载一个页面（没有任何使用选择）时，一切都很好。应用从商店初始状态数据中获取：{'Date': null,'Operation': 'revenue'}。

当我尝试在下拉列表中选择一个选项（例如，“value1”）时，我希望从 redux-store 接收到更新的数据。例如 - {'Date': null,'Operation': 'value1'}。但与我从旧商店收到的值相反 - {'Date': null,'Operation': 'revenue'}。

在浏览器控制台中，我看到以下消息：

index.js:1437 Unexpected key "items" found in preloadedState argument passed to createStore. Expected to find one of the known reducer keys instead: "fetch", "update". Unexpected keys will be ignored.

请告诉我，如何从 Select 下拉列表中更新 redux-store 中的对象状态？

Answer 1

您可以尝试在您的应用程序中使用“redux-persist”。此包延迟应用 UI 渲染，直到您的持久状态被检索并在页面刷新后保存到 redux。你可以在https://www.npmjs.com/package/redux-persist阅读文档

或者，您可以将下拉菜单配置为不刷新页面，只刷新页面上受影响的值，这样可以提供更清晰的 UI 体验。