Javascript 使用Redux数据保留材质UI选择

我正在尝试使用Redux中的数据实现一个Material UI Select组件，以允许这些选择在刷新过程中保持不变

我在Redux中有两个数据数组：

sourceTags

array，这是我的可点击菜单选项列表，以及我的

selectedTags

array，其中包括所选选项（用户点击的选项）。材质UI组件的api为

该组件如下所示：

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;

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;

我明白了

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

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

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;

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;

import React，{useffect，useState}来自“React”；
从“@material ui/core”导入{Select，Input，MenuItem}；
从“react redux”导入{useDispatch，useSelector}；
从“./actions/search”导入{setTags}；
常量MultiChipSelect=（{source}）=>{
const dispatch=usedpatch（）；
const selectedTags=useSelector（state=>state.search.tags）；
const sourceTags=useSelector（state=>state.settings[source].tags）；
const handleTagClick=async（e）=>{
调度（设置标签（如目标值））；
};
返回(
（//使用对象时，此函数是必需的，因为“label”值应显示value.data值，而不仅仅是对象。这是必需的，因为我使用的是对象而不是字符串。
//    
//{selected.map（值=>(
//        
//      ))}
//    
//  )}
>
>
{sourceTags.map（val=>(
{val.data}
))}
);
}
导出默认多芯片选择；