使用 Redux 存储数据填充 Material-UI 下拉列表

Question

我正在尝试让我的 Redux 存储字段自动填充我已导入的方法。 我是否以正确的方式来完成这项工作？ 我需要为每个字段创建一个映射选项吗？

我的每个下拉列表都插入了一个 PopulateDropdown 列表和每个下拉列表中的字段，但我需要根据 id 和文本将它们拆分。

我是否在下面正确访问了我的 redux 商店？ 我使用 const fields = useSelector(state => state.fields) 在我的 function 组件上声明了数组；

更新我已经将方法插入到下拉列表应该在的位置，但是我认为我没有正确访问导致问题的数据。 字段数组已被分解为每个下拉列表的六个不同字段，并为每个字段创建了不同的映射选项。

我需要做什么才能将数据放入方法中？ 我见过的示例在组件上声明了 static arrays 而不是使用 Redux 商店。

const fields = useSelector(state => state.fields);
// can destructure individual fields
const { diveSchoolList, currentList, regionList, diveTypeList, visibilityList, diveSpotList } = fields;

我已导入的 populateDropdown 方法

export 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>
);
};

导入的下拉菜单

       <PopulateDropdown
           dataList={diveType}
           mappingOptions={mappingOptions}
           name="fieldName"
           label="Select dive type"
           value={dive.typeID}
           onChange={handleChange}/>

更新

我已经更新了我的操作、reducer 和 populateFields 方法，但是我仍然无法将 redux 数据映射到我的两个属性字段。 在 Redux 树中，当我控制台记录它们时，它们打印的字段应该位于 fields.data.fieldlists 下。

我应该以什么方式将它们填充到 titleProperty 等中？ 它目前看起来可能正在填充，但是一个大框下拉我看不到里面的任何值。

// select user object from redux
        const user = useSelector(state => state.user);

        // get the object with all the fields
        const fields = useSelector(state => state.fields);

        // can destructure individual fields
        const { diveSchoolList = [],
                currentList = [],
                regionList = [],
                diveTypeList = [],
                visibilityList = [],
                diveSpotList = [],
                marineTypeList = [],
                articleTypeList = []
        } = fields;

 .........


<PopulateDropdown
   dataList={fields.data.diveTypeList} // the options array
   titleProperty={fields.data.diveTypeList.diveTypeID} // option label property
   valueProperty={fields.data.diveTypeList.diveType} // option value property
   label="Dive Type Name" // label above the select
   placeholder="Select dive type" // text show when empty
   value={dive.typeID} // get value from state
   onChange={handleChange(setDive.typeID)} // update state on change
/>

Answer 1

您的PopulateDropdown组件看起来是正确的，只是我们需要它使用我们作为道具传递的value和onChange 。

我个人的偏好是使用单独的属性valueProperty和titleProperty而不是传递单个mappingOptions 。 这样您就不需要为每个下拉菜单创建对象，您只需在 JSX 中设置两个属性。 如果您对数据进行规范化，以便每个列表的元素具有相同的属性id和label ，则可以完全摆脱这部分。

<PopulateDropdown
  dataList={diveTypeList} // the options array
  titleProperty={"diveTypeId"} // option label property
  valueProperty={"diveType"} // option value property
  label="Dive Type Name" // label above the select
  placeholder="Select dive type" // text show when empty
  value={dive.typeID} // get value from state
  onChange={handleChange("typeId")} // update state on change
/>

export const PopulateDropdown = ({
  dataList = [],
  valueProperty,
  titleProperty,
  label,
  ...rest // can just pass through all other props to the Select
}: Props) => {
  return (
    <FormControl style={{ width: 200 }}>
      <InputLabel id={label}>{label}</InputLabel>
      <Select {...rest} labelId={label}>
        {dataList.map((item) => (
          <MenuItem value={item[valueProperty]}>{item[titleProperty]}</MenuItem>
        ))}
      </Select>
    </FormControl>
  );
};

看起来currentId中的 ids 实际上是一个number ，所以在你的代码中的某个时刻你会想要用parseInt转换它，因为e.target.value总是一个string ，尽管后端可以处理它。

---

加载 API 数据

看起来您已经知道如何在一个 API 调用中获取所有字段，这很棒。 您将其保存到字段缩减器上的属性fields中，该字段创建结构state.fields.fields 。 由于您要替换整个 state，因此您可以将整个内容作为整个切片 state 返回。

You can initialize your state object with empty arrays, or you can use an empty object {} as your initial state and fallback to an empty array when you destructure the arrays off of it, like const {diveSchoolList = [], currentList = []} = fields 。

export const requireFieldData = createAsyncThunk(
  "fields/requireData", // action name
  // don't need any argument because we are now fetching all fields
  async () => {
    const response = await diveLogFields();
    return response.data;
  },
  // only fetch when needed: https://redux-toolkit.js.org/api/createAsyncThunk#canceling-before-execution
  {
    // _ denotes variables that aren't used -  the first argument is the args of the action creator
    condition: (_, { getState }) => {
      const { fields } = getState(); // returns redux state
      // check if there is already data by looking at the didLoadData property
      if (fields.didLoadData) {
        // return false to cancel execution
        return false;
      }
    }
  }
);

const fieldsSlice = createSlice({
  name: "fields",
  initialState: {
    currentList: [],
    regionList: [],
    diveTypeList: [],
    visibilityList: [],
    diveSpotList: [],
    diveSchoolList: [],
    marineTypeList: [],
    articleTypeList: [],
    didLoadData: false,
  },
  reducers: {},
  extraReducers: {
    // picks up the pending action from the thunk
    [requireFieldData.pending.type]: (state) => {
      // set didLoadData to prevent unnecessary re-fetching
      state.didLoadData = true;
    },
    // picks up the success action from the thunk
    [requireFieldData.fulfilled.type]: (state, action) => {
      // want to replace all lists, there are multiple ways to do this
      // I am returning a new state which overrides any properties
      return {
        ...state,
        ...action.payload
      }
    }
  }
});

所以在组件中我们现在只需要调用一个动作而不是循环遍历字段。

useEffect(() => {
    dispatch(requireFieldData());
}, []);