使用 Redux 数据持久化 Material-UI 选择

Question

我正在尝试使用来自 Redux 的数据实现一个 Material-UI Select 组件，以允许选择在刷新时保持不变。

我在 Redux 中有两个数据数组：sourceTags 数组，这是我的可点击菜单选项列表，我的 selectedTags 数组，其中包括选定的选项（用户点击的那些）。 Material-UI组件的api是here。

组件如下所示：

import React, { useEffect, useState } from 'react';
import { Select, Input, MenuItem } from "@material-ui/core";
import { useDispatch, useSelector } from "react-redux";
import { setTags } from "../actions/search";

const MultiChipSelect = ({ source }) => {

    const dispatch = useDispatch();
    const selectedTags = useSelector(state => state.search.tags);
    const sourceTags = useSelector(state => state.settings[source].tags);

    const handleTagClick = async (e) => {
        dispatch(setTags(e.target.value)); // Sets my searchTags list in Redux.
        // The e.target.value is an array of objects, or an empty array.

    };

    return (
        <Select
        multiple
        value={selectedTags}
        onChange={handleTagClick}
        input={<Input id="select-multiple" />}
        >
        {sourceTags.map(val => (
            <MenuItem key={val._id} value={val}>
            {val.data}
            </MenuItem>
        ))}
        </Select>
    );
}

export default MultiChipSelect;

该组件至少部分有效。这是我进行选择时的样子：

redux 存储也在正确更新。很高兴分享动作生成器和减速器，但这不是问题。

问题是，当我刷新页面时，selectedTags 数组没有显示在组件中。对象确实出现在 select 组件中，但没有出现：

我如何重构这个 Material-UI 组件以正确地从我的 Redux 存储中提取数据，并在刷新时保持显示的选择，而不是依赖于没有的 useState 挂钩，根据示例?

对于上下文，这是使用useState 钩子的样子。请记住，这不会在刷新期间保留选择：

import React, { useState } from 'react';
import { Select, Input, MenuItem } from "@material-ui/core";
import { useSelector } from "react-redux";

const MultiChipSelect = ({ source }) => {

    const sourceTags = useSelector(state => state.settings[source].tags);
    const [tags, setTags] = useState([]);

    const handleTagClick = async (e) => {
        setTags(e.target.value); // Sets my tags list.
    };

    return (
        <Select
        multiple
        value={tags}
        onChange={handleTagClick}
        input={<Input id="select-multiple" />}
        >
        {sourceTags.map(val => (
            <MenuItem key={val._id} value={val}>
            {val.data}
            </MenuItem>
        ))}
        </Select>
    );
}

export default MultiChipSelect;

Answer 1

想通了。

事实证明，组件实际上正确地接收了信息，但它没有显示它，因为它使用了默认的渲染功能。

我需要将渲染函数替换为使用对象数据的函数。固定组件如下所示：

import React, { useEffect, useState } from 'react';
import { Select, Input, MenuItem } from "@material-ui/core";
import { useDispatch, useSelector } from "react-redux";
import { setTags } from "../actions/search";

const MultiChipSelect = ({ source }) => {

    const dispatch = useDispatch();
    const selectedTags = useSelector(state => state.search.tags);
    const sourceTags = useSelector(state => state.settings[source].tags);

    const handleTagClick = async (e) => {
        dispatch(setTags(e.target.value));
    };

    return (
        <Select
        multiple
        value={selectedTags}
        onChange={handleTagClick}
        input={<Input id="select-multiple" />}
        // renderValue={selected => ( // This function is necessary when using objects, because the 'label' value should display the value.data value, not just the object. This is necessary because I'm using objects instead of strings.
        //    <div>
        //      {selected.map(value => (
        //        <Chip key={value._id} label={value.data}/>
        //      ))}
        //    </div>
        //  )}
        >
        >
        {sourceTags.map(val => (
            <MenuItem key={val._id} value={val}>
            {val.data}
            </MenuItem>
        ))}
        </Select>
    );
}

export default MultiChipSelect;