使用Redux存储数据在React中填充下拉字段 [英] Using Redux store data to populate dropdown fields in React

问题描述

我正在尝试使用商店中的Redux数据填充表单组件中的下拉字段.

I am trying to populate dropdown fields in a form component using Redux data that I have in my store.

以下方法适用于我的每个下拉列表，这些下拉列表并未填充，因为我认为我无法正确访问数据.我正在尝试使其针对每个字段对象中的各个值进行迭代.我对此是否正确?

The below method is for each of my dropdowns which isn't populating as I don't think I am accessing the data correctly. I am trying to get it to iterate it out for the individual values in each of my field objects. Am I going down the correct with this?

const populateDropdown (option){

            this.props.fields.{option}.length > 0 &&
            this.props.fields.diveType.map(({diveType}) => {
                return (
                    <MenuItem value={diveType.diveTypeID}>{diveType.diveType}</MenuItem>
                )};
        }

我还有另一种使用useEffects和object.keys的方法，我不知道会做同样的事情.

I have another method with useEffects and object.keys that I don't know would do the same thing.

useEffect(() => {
            // dispatch the action to load fields for each field type
            // once loaded, the changes will be reflected in the fields variable from the useSelector
            Object.keys(fields).forEach(name => dispatch(requireFieldData(name)));
        }, []); // <-- empty array

推荐答案

在使用material-UI开发选择输入时，我遇到了同样的问题.对于该解决方案，我创建了一个单独的可重用组件来生成选择输入.

I have faced the same problem while developing the select input using material-UI. for the solution, I created one separate reusable component for generating select input.

PopulateDropdown.js

import React from "react";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";

/**
 * props.dataList: your redux array of object. set default value is empty array
 * props.mappingOprions: its content title and value for render the MenuItem title and value  
 * props.name: form fielname
 * props.label: input label
 */

const populateDropdown = ({ dataList = [], mappingOptions, name, label }) => {
  const { title, value } = mappingOptions;
  return (
    <FormControl style={{ width: 200 }}>
      <InputLabel id={label}>{label}</InputLabel>
      <Select labelId={label} name={name}>
        {dataList.map((item) => (
          <MenuItem value={item[value]}>{item[title]}</MenuItem>
        ))}
      </Select>
    </FormControl>
  );
};

export default populateDropdown;

如何使用此组件

//Custome components
import PopulateDropdown from "./components/PopulateDropdown.js";

// consider this as redux state
const reduxStateData = [
  { diveTypeID: 1, diveType: "type 1" },
  { diveTypeID: 2, diveType: "type 2" },
  { diveTypeID: 3, diveType: "type 3" }
];

// mapping options
/**
 * enter keys (which you wan to render as title and value in dropdown list) as value in title and value
 */
const mappingOptions = { title: "diveType", value: "diveTypeID" };

export default function App() {
  return (
    <div className="App">
      <PopulateDropdown
        dataList={reduxStateData}
        mappingOptions={mappingOptions}
        name="feildName"
        label="Select div type"
      />
    </div>
  );
}

其他

您可以添加 defaultOption 道具，以填充下拉默认选项，例如 none 或 select option Menuitem

You can add defaultOption props for populating the dropdown default option like none or select option Menuitem

codesandbox链接 https://codesandbox.io/s/gifted-bose-q3kb0?file=/src/App.js:0-744

codesandbox link https://codesandbox.io/s/gifted-bose-q3kb0?file=/src/App.js:0-744

这篇关于使用Redux存储数据在React中填充下拉字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！