类型错误：searchField.toLowerCase 不是使用 hooks 和 redux 时的函数

大佬教程收集整理的这篇文章主要介绍了类型错误：searchField.toLowerCase 不是使用 hooks 和 redux 时的函数，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决类型错误：searchField.toLowerCase 不是使用 hooks 和 redux 时的函数？

我一直在做一个小项目来更好地理解 React。我最近将它转换为使用钩子，我正在尝试使用它来实现 redux。但是我现在收到以下错误。

TypeError: searchFIEld.tolowerCase is not a function

查看文档，我从 connect 开始停止使用 react-redux，转而使用 usedispatch 和 useSELEctor。但我相信我已经正确设置了所有内容，但不确定为什么会引发此错误。

这是我的 action.Js

import { SEARCH_EVENT } from './searchfIEld_constants';

export const setSearchFIEld = (payload) => ({ type: SEARCH_EVENT,payload });

这是我的减速机

import { SEARCH_EVENT } from './searchfIEld_constants';

const initialState = {
  searchFIEld: '',};

export const searchRobots = (state = initialState,action = {}) => {
  switch (action.typE) {
    case SEARCH_EVENT:
      return { ...state,searchFIEld: action.payload };
    default:
      return state;
  }
};

这是我的 index.Js，我在其中使用了 ProvIDer 中的 react-redux

import React from 'react';
import ReactDOM from 'react-dom';
import { ProvIDer } from 'react-redux';
import { createStore } from 'redux';
import { searchRobots } from './searchfIEld/searchfIEld_reducers';
import './styles/index.CSS';
import App from './App';

const store = createStore(searchRobots);

ReactDOm.render(
  <React.StrictMode>
    <ProvIDer store={storE}>
      <App />
    </ProvIDer>
  </React.StrictMode>,document.getElementByID('root')
);

最后是我的 App.Jsx

import { useState,useEffect,useCallBACk } from 'react';
import { setSearchFIEld } from './searchfIEld/searchfIEld_actions';
import { usedispatch,useSELEctor } from 'react-redux';
import axios from 'axios';
import React from 'react';
import CardList from './components/CardList';
import SearchBox from './components/SearchBox';
import Scroll from './components/Scroll';
import Error from './components/Error';
import 'tachyons';
import './styles/App.CSS';

// const mapStatetoProps = (statE) => ({
//   searchFIEld: state.searchFIEld,// });

// const mapdispatchtoprops = (dispatch) => ({
//   onSearchChange: (E) => dispatch(setSearchFIEld(e.target.value)),// });

const App = () => {
  const searchFIEld = useSELEctor(state => state.searchFIEld)
  const dispatch = usedispatch();
  const [robots,setRobots] = useState([]);
  // const [searchFIEld,setSearchFIEld] = useState('');

  const fetchUsers = useCallBACk(async () => {
    try {
      const result = await axios('//Jsonplaceholder.typicode.com/users');
      setRobots(result.data);
    } catch (error) {
      console.log(error);
    }
  },[]); // eslint-disable-line react-hooks/exhaustive-deps

  useEffect(() => {
    fetchUsers();
  },[]); // eslint-disable-line react-hooks/exhaustive-deps

  const filteredRobots = robots.filter((robot) => {
    return robot.name.tolowerCase().includes(searchFIEld.tolowerCase());
  });

  return !robots.length ? (
    <h1 classname='f1 tc'>Loading...</h1>
  ) : (
    <div classname='App tc'>
      <h1 classname='f1'>RoboFrIEnds</h1>
      <SearchBox searchChange={dispatch(setSearchFIEld(e => e.target.value))} />
      <Scroll>
        <Error>
          <CardList robots={filteredRobots} />
        </Error>
      </Scroll>
    </div>
  );
};


export default App;

我做错了什么？

解决方法

  const onSearchChange = (E) => {
    dispatch(setSearchField(e.target.value));
  };

return !robots.length ? (
    <h1 className='f1 tc'>Loading...</h1>
  ) : (
    <div className='App tc'>
      <h1 className='f1'>RoboFriends</h1>
      <SearchBox searchChange={onSearchChangE} />
      <Scroll>
        <Error>
          <CardList robots={filteredRobots} />
        </Error>
      </Scroll>
    </div>
  );
};

const searchField = useSELEctor(state => state.searchField)

const { searchField } = useSELEctor(state => state.searchField)

state = {
...state,searchField
}

<SearchBox searchChange={dispatch(setSearchField(e => e.target.value))} />

<SearchBox searchChange={() => dispatch(setSearchField(e => e.target.value))} />

大佬总结

以上是大佬教程为你收集整理的类型错误：searchField.toLowerCase 不是使用 hooks 和 redux 时的函数全部内容，希望文章能够帮你解决类型错误：searchField.toLowerCase 不是使用 hooks 和 redux 时的函数所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。