我希望根据用户选择的年份显示玩家。例如，如果我在第二场选拔赛的第一场选拔赛中选择2011年，那么只有2011年出生的球员。我为每年创建了一个if语句，并检查他是否出生在当年1月1日至12月31日之间，但我认为这样做效率不高(100个if语句(。我正在使用React js
代码低于
import React, { useState, useEffect } from 'react';
import './style.css';
export default function App() {
const vitet = [
2030, 2029, 2028, 2027, 2026, 2025, 2024, 2023, 2022, 2021, 2020, 2019,
2018, 2017, 2016, 2015, 2014, 2013, 2012, 2011, 2010, 2009, 2008, 2007,
2006, 2005, 2004, 2003, 2002, 2001, 2000, 1999, 1998, 1997, 1996, 1995,
1994, 1993, 1992, 1991, 1990, 1989, 1988, 1987, 1986, 1985, 1984, 1983,
1982, 1981, 1980, 1979, 1978, 1977, 1976, 1975, 1974, 1973, 1972, 1971,
1970, 1969, 1968, 1967, 1966, 1965, 1964, 1963, 1962, 1961, 1960, 1959,
1958, 1957, 1956, 1955, 1954, 1953, 1952, 1951, 1950, 1949, 1948, 1947,
1946, 1945, 1944, 1943, 1942, 1941, 1940, 1939, 1938, 1937, 1936, 1935,
1934, 1933, 1932, 1931, 1930, 1929, 1928, 1927, 1926, 1925, 1924, 1923,
1922, 1921, 1920, 1919, 1918, 1917, 1916, 1915, 1914, 1913, 1912, 1911,
];
const [year, setyear] = useState('');
const [option, setOption] = useState([]);
const [players, setPlayers] = useState([
{ playerName: 'ANn', playerId: '1', birthday: '2010-01-02' },
{ playerName: 'Eli', playerId: '2', birthday: '2011-01-02' },
{ playerName: 'Benn', playerId: '3', birthday: '2012-01-02' },
{ playerName: 'Klo', playerId: '4', birthday: '2013-01-02' },
{ playerName: 'Jhon', playerId: '5', birthday: '2014-01-02' },
{ playerName: 'Billy', playerId: '6', birthday: '2015-01-02' },
{ playerName: 'Dani', playerId: '7', birthday: '2015-01-02' },
{ playerName: 'Molly', playerId: '8', birthday: '2016-01-02' },
{ playerName: 'emily', playerId: '9', birthday: '2000-01-02' },
]);
let secondOptions = players;
if (year === '2010') {
secondOptions = players.filter(
(players) =>
players.birthday >= '2010-01-01' && players.birthday <= '2010-12-31'
);
} else if (year === '2011') {
secondOptions = players.filter(
(players) =>
players.birthday >= '2011-01-01' && players.birthday <= '2011-12-31'
);
} else if (year === '2012') {
secondOptions = players.filter(
(players) =>
players.birthday >= '2012-01-01' && players.birthday <= '2012-12-31'
);
} else if (year === '2013') {
secondOptions = players.filter(
(players) =>
players.birthday >= '2013-01-01' && players.birthday <= '2013-12-31'
);
} else if (year === '2014') {
secondOptions = players.filter(
(players) =>
players.birthday >= '2014-01-01' && players.birthday <= '2014-12-31'
);
} else if (year === '2015') {
secondOptions = players.filter(
(players) =>
players.birthday >= '2015-01-01' && players.birthday <= '2015-12-31'
);
} else if (year === '2016') {
secondOptions = players.filter(
(players) =>
players.birthday >= '2016-01-01' && players.birthday <= '2016-12-31'
);
} else if (year === '2017') {
secondOptions = players.filter(
(players) =>
players.birthday >= '2017-01-01' && players.birthday <= '2017-12-31'
);
} else if (year === '2018') {
secondOptions = players.filter(
(players) =>
players.birthday >= '2018-01-01' && players.birthday <= '2018-12-31'
);
} else if (year === '2019') {
secondOptions = players.filter(
(players) =>
players.birthday >= '2019-01-01' && players.birthday <= '2019-12-31'
);
} else if (year === '2000') {
secondOptions = players.filter(
(players) =>
players.birthday >= '2000-01-01' && players.birthday <= '2000-12-31'
);
} else {
secondOptions = [];
}
useEffect(() => {
// Update the document title using the browser API
console.log('playerat per ke optioni', secondOptions);
});
return (
<div>
<h1>Hello StackBlitz!</h1>
<p>Start editing to see some magic happen :)</p>
<select name="" id="" onChange={(e) => setyear(e.target.value)}>
{/* <option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option> */}
{vitet.map((item) => (
<option value={item}>{item}</option>
))}
</select>
<select>
{secondOptions.map((item) => (
<option key={item.playerId}>{item.playerName}</option>
))}
</select>
<p> {year}</p>
</div>
);
}
要查看代码编辑器，您可以在此处看到。
https://stackblitz.com/edit/react-jruwh9
如果你真的想把日期当作字符串(检查答案末尾的注释(，你可以做以下
import React, { useState } from 'react';
import './style.css';
const years = [
2030, 2029, 2028, 2027, 2026, 2025, 2024, 2023, 2022, 2021, 2020, 2019,
2018, 2017, 2016, 2015, 2014, 2013, 2012, 2011, 2010, 2009, 2008, 2007,
2006, 2005, 2004, 2003, 2002, 2001, 2000, 1999, 1998, 1997, 1996, 1995,
1994, 1993, 1992, 1991, 1990, 1989, 1988, 1987, 1986, 1985, 1984, 1983,
1982, 1981, 1980, 1979, 1978, 1977, 1976, 1975, 1974, 1973, 1972, 1971,
1970, 1969, 1968, 1967, 1966, 1965, 1964, 1963, 1962, 1961, 1960, 1959,
1958, 1957, 1956, 1955, 1954, 1953, 1952, 1951, 1950, 1949, 1948, 1947,
1946, 1945, 1944, 1943, 1942, 1941, 1940, 1939, 1938, 1937, 1936, 1935,
1934, 1933, 1932, 1931, 1930, 1929, 1928, 1927, 1926, 1925, 1924, 1923,
1922, 1921, 1920, 1919, 1918, 1917, 1916, 1915, 1914, 1913, 1912, 1911,
];
const players = [
{ playerName: 'ANn', playerId: '1', birthday: '2010-01-02' },
{ playerName: 'Eli', playerId: '2', birthday: '2011-01-02' },
{ playerName: 'Benn', playerId: '3', birthday: '2012-01-02' },
{ playerName: 'Klo', playerId: '4', birthday: '2013-01-02' },
{ playerName: 'Jhon', playerId: '5', birthday: '2014-01-02' },
{ playerName: 'Billy', playerId: '6', birthday: '2015-01-02' },
{ playerName: 'Dani', playerId: '7', birthday: '2015-01-02' },
{ playerName: 'Molly', playerId: '8', birthday: '2016-01-02' },
{ playerName: 'emily', playerId: '9', birthday: '2000-01-02' },
];
export default function App() {
const [year, setYear] = useState('');
// With strings, as your code
const secondOptions = players.filter(player => player.birthday.startsWith(`${year}-`));
// Or, with Date (in this case it would be better to perform the conversion in the original object, instead of here, for better performance)
// const secondOptions = players.filter(player => new Date(player.birthday).getFullYear() === year);
return (
<div>
<h1>Hello StackBlitz!</h1>
<p>Start editing to see some magic happen :)</p>
<select onChange={(e) => setYear(e.target.value)}>
{years.map((item) => (
<option key={`year_option_${item}`} value={item}>{item}</option>
))}
</select>
<select>
{secondOptions.map((item) => (
<option key={`second_option_${item.playerId}`} value={item.playerId}>{item.playerName}</option>
))}
</select>
<p>{year}</p>
</div>
);
}
我将一些变量移出了组件，因为它们现在不需要在组件中。此外，我添加了一些缺失的键，并删除了未使用的变量，以进行演示。
关于日期的重要说明
通常最好将日期视为Date，而不是字符串。
如果您决定将日期视为Date实例，那么您可以使用JavaScript中可用的函数，并在过滤器部分执行类似于我发布的代码中显示的操作。
正如@GiorgiMoniava在这里的评论中提到的，如果你选择Date解决方案，在将字符串转换为Date时要小心这些问题
https://stackoverflow.com/a/22835394
我将从优化您的年度选择开始。使用起始年份，并填充一个数组直到现在。没有人生来就是未来。。。然而；(
接下来，只用那些有玩家的年份来过滤年份，接下来，如果你设置年份，只需过滤当前年份的玩家。
import React, { useState } from 'react';
import './style.css';
export default function App() {
const START_YEAR = 1911;
const END_YEAR = new Date().getFullYear() + 1;
const [year, setyear] = useState('');
const [players, setPlayers] = useState([
{ playerName: 'ANn', playerId: '1', birthday: '2010-01-02' },
{ playerName: 'Eli', playerId: '2', birthday: '2011-01-02' },
{ playerName: 'Benn', playerId: '3', birthday: '2012-01-02' },
{ playerName: 'Klo', playerId: '4', birthday: '2013-01-02' },
{ playerName: 'Jhon', playerId: '5', birthday: '2014-01-02' },
{ playerName: 'Billy', playerId: '6', birthday: '2015-01-02' },
{ playerName: 'Dani', playerId: '7', birthday: '2015-01-02' },
{ playerName: 'Molly', playerId: '8', birthday: '2016-01-02' },
{ playerName: 'emily', playerId: '9', birthday: '2000-01-02' },
]);
const vitet = new Array(END_YEAR - START_YEAR)
.fill(START_YEAR)
.map((current, i) => current + i)
.filter(
(year) =>
players.find(
(player) => player.birthday.substr(0, 4) === year.toString()
) !== undefined
);
return (
<div>
<h1>Hello StackBlitz!</h1>
<p>Start editing to see some magic happen :)</p>
<select name="" id="" onChange={(e) => setyear(e.target.value)}>
{vitet.map((item) => (
<option value={item}>{item}</option>
))}
</select>
<select>
{players
.filter((player) => player.birthday.substr(0, 4) === year.toString())
.map((item) => (
<option key={item.playerId}>{item.playerName}</option>
))}
</select>
<p> {year}</p>
</div>
);
}