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

Question

我正在尝试使用 Redux 中的数据实现 Material-UI Select 组件，以允许选择在刷新时保持不变。我在 Redux 中有两个数据sourceTags数组：数组，它是我的可点击菜单选项列表，以及我的selectedTags数组，其中包含选定的选项（用户点击的选项）。Material-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;该组件至少部分工作。这是我进行选择时的样子：redux 商店也正在正确更新。很高兴分享动作生成器和减速器，但这不是问题。问题是，当我刷新页面时，selectedTags 数组没有显示在组件中。对象确实出现在选择组件内，但没有出现：我如何重构这个 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.    };

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;