Question

我正在尝试使用redux在此处创建一个搜索框，但是每次我运行代码时，它似乎都完美无缺，爬入了一些错误。这表明状态未定义，随后节点的webpack_require文件中出现错误模块。再次，它表明searchField未定义。任何帮助将不胜感激。

动作：

import { CHANGE_SEARCH_FIELD } from './constants.js';

export const setSearchField=(text)=>({
    type: CHANGE_SEARCH_FIELD,
    payload: text
})

减速器：

import { CHANGE_SEARCH_FIELD} from './constants.js';

const initialState={
    searchField: ''
}

export const searchRobots=(state=initialState, action={})=>{
    switch(action.type){
        case CHANGE_SEARCH_FIELD:
            return Object.assign({},state,{searchField: action.payload});
        default: return state;
    }
}

index.js：

import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import {createStore} from 'redux';
import './index.css';
import 'tachyons';
import App from './App.js'
import * as serviceWorker from './serviceWorker';
import {searchRobots} from './reducers.js';

const store= createStore(searchRobots);

ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));

serviceWorker.register();

容器：

import React, {Component} from 'react';
import {connect} from 'react-redux';
import CardList from './CardList';
import SearchBox from './SearchBox';
import Scroll from './Scroll';
import {setSearchField} from './actions.js'
import './App.css';

const mapStateToProps=(state)=>{
    return {
        searchField: state.searchRobots.searchField
    }
}

const mapDispatchToProps=(dispatch)=>{
    return {
        onSearchChange: (event)=>{
            dispatch(setSearchField(event.target.value))
        }
    }
}

class App extends Component{
    constructor(){
        super()
        this.state={
            robots: [],
        }
    }


    componentDidMount(){
        fetch('https://jsonplaceholder.typicode.com/users')
        .then(
            response=>{return response.json();}
            )
        .then(
            users=>{this.setState({robots: users});}
            );
    }
    render(){
        const {searchField,onSearchChange}=this.props;
        const filteredRobots= this.state.robots.filter(robot=>{return robot.name.toLowerCase().includes(searchField.toLowerCase())});
        return(
        <div className='tc'>
            <h1 id="robo">ROBOFRIENDS</h1>
            <SearchBox searchChange={onSearchChange}/>
            <Scroll>
                <CardList robots={filteredRobots} />
            </Scroll>
        </div>
        );
    };
}

export default connect(mapStateToProps,mapDispatchToProps)(App);

任何有关该错误的线索将不胜感激

提供者未能通过状态作为react-redux中的道具

0 个答案: