代码之家 › 专栏 › 技术社区 › Harrison Cramer

使用重复数据持久化物料UI选择

react-hooks material-ui redux reactjs javascript

Harrison Cramer · 技术社区 · 5 年前

我正在尝试使用Redux中的数据实现materialuiselect组件,以允许在刷新期间保持选择。

我在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;

该组件至少部分工作。以下是我做出选择时的样子:

问题是,当我刷新页面时,selectedTags数组没有显示在组件中。对象确实显示在“选择”组件内,但不显示:

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;

0 回复 | 直到 5 年前

Harrison Cramer 5 年前

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

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;