获取<选择>从状态设置的defaultValue。反应MUI

Question

我已经研究这个错误几天了，但找不到任何可以修复它的东西。

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

我在渲染时获取要在 console.log() 中发送的数据，但它不会填充 。

这是我有问题的代码：

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]”，我可以获得要填充的 defaultValue，但我无法使用 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 状态并实际完全控制选择输入。使用 value 属性而不是您在初始渲染后尝试更改的 defaultValue 属性。

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

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

示例：

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>
  );
}