获取 <Select> 个要从某个状态设置的默认值。反应MUI

Question

几天来我一直在研究这个错误，但找不到任何可以修复它的方法。

我试图做的是填充来自本地存储并与获取请求数据连接的预 selected 值。 select 请求数据填充为菜单选项，默认 select 应保存在本地，因此当用户刷新或离开返回时，他们的联赛仍然是 selected。

我正在获取要在 console.log() 呈现时发送的数据，但它不会填充 <Select default={currentLeague}>。

这是我的问题代码：

import React, { useState, useEffect } from  "react";

import { 
AppBar, Toolbar, Tabs, Tab, Button, Box, Menu, MenuItem, Divider, Typography, Grid, Select, FormControl, } from '@mui/material';

export default function NavBar(props){
    const [leagues, setLeagues] = useState([]);
    const [currentLeague, setCurrentLeague] = useState()

    useEffect(() => {
        getLeagues();
        setCurrentLeague(JSON.parse(localStorage.getItem('currentLeague')));
     }, []);

    const getLeagues = () => {
        fetch('/draft/get-user-leagues')
            .then((response) => response.json())
            .then((data) => {
                setLeagues(data)
            })
    }

    function handleLeagueChange(e) {
        localStorage.setItem('currentLeague', JSON.stringify(e.target.value));
    }   

    function leagueDropdown(leagues) {
        if (leagues.length === 0) {
            return (<Button
                    component={Link}
                    to='/create-league'
                    >
                        Create New League <AddCircleIcon sx={{marginLeft:'10px'}}/>
                    </Button>
            )
        } else {
        console.log("current League: " + currentLeague.name);
        console.log(currentLeague)
        return (
            <Select
                defaultValue={currentLeague}
                onChange={handleLeagueChange}
            >
                {leagues.map((league, index) => {
                    return <MenuItem 
                                value={league}
                            > 
                                {league.name}
                            </MenuItem>
                })}
            </Select>
        )
    }

    return (
    <AppBar>
        <Toolbar>
            <FormControl>
                {leagueDropdown(leagues)}
            </FormControl>
        </Toolbar>
    </AppBar>
    )
}

如果我手动输入 'leagues[1]'，我可以获得要填充的默认值，但我无法使用 currentLeague 填充它。

如有任何建议，我们将不胜感激！

编辑以添加回复：

    [
  {
    "name": "TestLeague2",
    "owner": "0e31ac27-8978-49cb-81e0-fa6259bdad2b",
    "year": 2022,
    "id": 1
  },
  {
    "name": "TestLeague2",
    "owner": "0e31ac27-8978-49cb-81e0-fa6259bdad2b",
    "year": 2022,
    "id": 2
  },
  {
    "name": "TestLeague2",
    "owner": "0e31ac27-8978-49cb-81e0-fa6259bdad2b",
    "year": 2022,
    "id": 3
  },
  {
    "name": "TestLeague55",
    "owner": "0e31ac27-8978-49cb-81e0-fa6259bdad2b",
    "year": 2022,
    "id": 4
  },
  {
    "name": "TestLeague55",
    "owner": "0e31ac27-8978-49cb-81e0-fa6259bdad2b",
    "year": 2022,
    "id": 5
  },
  {
    "name": "Jacob's League",
    "owner": "0e31ac27-8978-49cb-81e0-fa6259bdad2b",
    "year": 2022,
    "id": 6
  },
  {
    "name": "test234",
    "owner": "0e31ac27-8978-49cb-81e0-fa6259bdad2b",
    "year": 2022,
    "id": 7
  },
  {
    "name": "teasdf",
    "owner": "0e31ac27-8978-49cb-81e0-fa6259bdad2b",
    "year": 2022,
    "id": 8
  },
  {
    "name": "teasdf",
    "owner": "0e31ac27-8978-49cb-81e0-fa6259bdad2b",
    "year": 2022,
    "id": 9
  },
  {
    "name": "teasdf",
    "owner": "0e31ac27-8978-49cb-81e0-fa6259bdad2b",
    "year": 2022,
    "id": 10
  },
  {
    "name": "please1",
    "owner": "0e31ac27-8978-49cb-81e0-fa6259bdad2b",
    "year": 2022,
    "id": 11
  }
]

Answer 1

使用currentLeague状态，实际完全控制select输入。使用 value 道具而不是 defaultValue 道具，您试图在初始渲染后更改

。

您可以直接从 localStorage 初始化 currentLeague 状态。在 onChange 处理程序中加入正常的 React 状态更新，并使用 useEffect 挂钩将状态更改持久保存到 localStorage。

您不能将对象用于 select 输入的选项值，因此我建议使用 league.id 属性作为 select 值。

示例：

export default function NavBar(props){
  const [leagues, setLeagues] = useState([]);
  const [currentLeague, setCurrentLeague] = useState(
    JSON.parse(localStorage.getItem('currentLeague')) || ''
  );

  useEffect(() => {
    getLeagues();
  }, []);

  useEffect(() => {
    localStorage.setItem('currentLeague', JSON.stringify(currentLeague));
  }, [currentLeague]);

  const getLeagues = () => {
    fetch('/draft/get-user-leagues')
      .then((response) => response.json())
      .then((data) => {
        setLeagues(data)
      });
  };

  function handleLeagueChange(e) {
    setCurrentLeague(e.target.value);
  }   

  function leagueDropdown(leagues) {
    if (leagues.length === 0) {
      return (
        <Button component={Link} to='/create-league'>
          Create New League <AddCircleIcon sx={{marginLeft:'10px'}}/>
        </Button>
      )
    } else {
      return (
        <Select
          value={currentLeague}
          onChange={handleLeagueChange}
        >
          {leagues.map((league, index) => (
            <MenuItem key={league.id} value={league.id}> 
              {league.name}
            </MenuItem>
          ))}
        </Select>
      );
    }
  }

  return (
    <AppBar>
      <Toolbar>
        <FormControl>
          {leagueDropdown(leagues)}
        </FormControl>
      </Toolbar>
    </AppBar>
  );
}

获取 <Select> 个要从某个状态设置的默认值。反应MUI

Getting <Select> defaultValue to set from a state. React MUI

reactjs

material-ui