为什么 mapStateToProps 没有显示任何更新（TypeScript，ReactJS，Redux）

当我在输入框中输入一些文本时，当我在 reducer 中记录时，它会显示一些数据，同时 console.log(state.genreList) 输出的是一个数组。但它不会更新 SearchInput.tsx 中的 mapStateToProps。在 action 和 reducer 中，我看到值被正确地传递，但仍然不理解为什么它不会传递给 mapStateToProps。我是不是遗漏了什么？

为了让你更好地理解，我将添加一个 CodeSandbox。

链接到 CodeSandbox

// Reducer
import { types } from "../actions";

const initialState = {
    genreList: [],
    videoList: [],
    inputValue: ""
};

export const videoList = (state = initialState, action: any) => {
    switch(action.type) {
    case types.GET_DATA: {
        return {
            ...state,
            genreList: [...state.genreList, action.data]
        };
    }

    case types.GET_INPUT_VALUE: {
        return {
            ...state,
            inputValue: action.value
        }
    }

    default: 
        return state;
    }
};

export default videoList;

// Component
import React, {  useEffect } from 'react';
import { connect, useDispatch, ConnectedProps } from "react-redux";
import { getData, getInput } from "../../actions/index";
import axios from 'axios';

interface Genre {
    id: number;
    name: string;
}

interface Video {
    id: number;
    artist: string;
    title: string;
    release_year: number;
    genre_id: number;
    image_url: string;
}

interface IProps {
    genres?: Genre[];
    videos?: Video[];
    input_value?: string;
  }

export const SearchInput: React.FC<InputProps | IProps> = () => {
    const dispatch = useDispatch();

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await axios.get('https://raw.githubusercontent.com/XiteTV/frontend-coding-exercise/main/data/dataset.json');
                dispatch(getData(response.data));
            } catch (err) {
                console.log(err)
            }
        }
        fetchData();
    }, [dispatch]);

    const passValue = (e: string) => {
        dispatch(getInput(e));
    }

    return (
        <div>
            <input type="text" onChange={(e) => passValue(e.target.value)}/>
            <div>Search Input</div>
        </div>
    )
}


function mapStateToProps(state: any){
    // why I dont see anything here????
    console.log(state);
    return {
        genres: state.genreList,
    }
}


const connector = connect(mapStateToProps);
type InputProps = ConnectedProps<typeof connector>;
export default connect(SearchInput);

答案＃1

问题

1. 你正在导入命名导入，也就是未连接、未装饰的 SearchInput 组件。

   import { SearchInput } from './components/SearchInput/SearchInput';
   

2. 你没有正确地将 SearchInput 连接到你的 Redux 存储。

   const connector = connect(mapStateToProps);
   type InputProps = ConnectedProps<typeof connector>;
   export default connect(SearchInput); // <-- mapStateToProps not used
   

解决方案

将 SearchInput 连接到 redux。

const connector = connect(mapStateToProps); // <-- use connector
type InputProps = ConnectedProps<typeof connector>;
export default connector(SearchInput); // <-- here

默认导入已连接的组件。

import SearchInput from './components/SearchInput/SearchInput';