Javascript 为什么我不能在React中将objects字符串值传递给API排序函数？

我试图将{clickedYear}的值注入到我的筛选函数中，以便动态使用信息

如何从{clickedYear}中提取值，以便在数组中正确排序来自API的响应？在console.log上，信息以字符串形式存在，但在函数中不起作用。排序不起作用，返回一个空数组

这是我的密码：

const InformationBoxLayout = ({ clickedYear }) => {
    const [activeYear, setActiveYear] = useState([]);

useEffect(() => {
        axios
            .get('http://www.mocky.io/v2/5ea446a43000005900ce2ca3')
            .then((response) =>
                setActiveYear(
                    response.data.timelineInfo.filter(
                        (item) => item.year === { clickedYear }
                    )
                )
            );
    }, []);

return (...some code...)

---

当您不在JSX表达式中时（您不在

过滤器

回调中），您不需要

{}

左右的

clickedYear

。因此：

setActiveYear(
    response.data.timelineInfo.filter(
        (item) => item.year === clickedYear
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^^^^^^
    )
)

它不起作用的原因是，

{clickedYear}

是一个对象文字，创建了一个具有

clickedYear

属性的对象（它是

{clickedYear:clickedYear}

的简写属性表示法）。对象永远不会是字符串（我在JSON中看到，

year

是字符串）。还要确保

clickedYear

是一个字符串，而不是一个数字，因为您再次使用的

=

对于不同的类型来说永远不会是真的

您需要做的第二件事是将

clickedYear

作为依赖项传递给

useffect

钩子，因为您在钩子中使用了它的值：

useEffect(() => {
    axios
        .get('http://www.mocky.io/v2/5ea446a43000005900ce2ca3')
        .then((response) =>
            setActiveYear(
                response.data.timelineInfo.filter(
                    (item) => item.year === clickedYear
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^^^^^
                )
            )
        );
}, [clickedYear]);
// ^^^^^^^^^^^^^

如果没有该依赖项，效果回调将只触发一次。有了它，每次

单击年份

更改时都会触发它

---

旁注：如果您愿意，可以在

过滤器

回调中使用解构：

setActiveYear(
    response.data.timelineInfo.filter(
        ({year}) => year === clickedYear
// −−−−−−^^^^^^−−−−−^^^^
    )
)

---

activeYear

不是数组，您还没有共享任何显示

clickedYear

类型的代码。@eavichay-您如何知道

activeYear

不是数组？我知道名称并不表示它，但所有代码都表示它。@dgozen-你真的希望

activeYear

成为一个数组吗？从

useState

初始值设定项（

[]

）和将数组传递到

setActiveYear

的事实来看，这似乎很奇怪，我希望它是

activeYears

复数，而不是过滤到一年。JSON中出现的

activeYear

，不是数组。代码将

clickedYear

与

item.year

进行比较，但状态为数组。我假设更多的代码将有助于理解problem.JSON文件有几个具有相同年份键值的对象。这就是为什么我试图把它们都拉到同一个数组中。例如：到2019年，我将返回一个包含两个对象的数组。我将在稍后的代码返回时渲染它们嘿TJ我根据您的语法修复了建议，但触发setactiveyear（）后，我仍然返回一个空数组。。。关于我遗漏了什么，你有什么想法吗？@dgozen-你已经检查了上面建议的

clickedYear

的类型？这是一个字符串？在Useffect修复成功后谢谢！非常感谢你！