Почему я не могу передать строковое значение объекта в функцию сортировки API в React?

Question

Я пытаюсь ввести значение {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...)

Answer 1

Вам не нужно {} вокруг clickedYear, когда вы не находитесь в выражении JSX, которого нет в обратном вызове filter. Итак:

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

Причина, по которой он не работал, заключается в том, что { clickedYear } является литералом объекта, создающим объект со свойством clickedYear (это сокращенное обозначение свойства для { clickedYear: clickedYear }). Объект никогда не будет === строкой (я вижу в JSON, что year является строкой). Также убедитесь, что clickedYear является строкой, а не числом, так как вы снова используете ===, который никогда не будет верным для разных типов.

Второе, что вам нужно сделать, это передать clickedYear как зависимость от вашего useEffect хука, поскольку вы используете его значение в нем:

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

Без этой зависимости ваш обратный вызов эффекта будет вызван только один раз. С его помощью он будет срабатывать каждый раз, когда clickedYear изменяется.

---

Примечание: если хотите, вы можете использовать деструктуризацию в обратном вызове filter:

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