Question

我真的是Redux开发的新手。两天前刚开始

之前，我使用了props-状态模式，但是我要将部分state-props模式更改为Redux。

首先，我将显示我的代码。 index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import ItemList from './itemList';
import SearchList from './searchList';
import {Provider,connect} from 'react-redux';
import {store} from './storeReducer';
import {backToMain} from './reduxAction';
class App extends React.Component{
    // not important some codes 
    render(){
        return(
            <div> 
                <section id="Search">
                    <form  action="//localhost:80/ReactStudy/travelReduxApp/public/server/itemList.php" id="Search" className="search" method="GET" onSubmit={this.submitForm}>
                        <input ref={'search'} placeholder="search country, attraction names" type="text" name="search"/>
                        <button type="submit">SEARCH</button>
                    </form>

                    <p className={this.state.validateError.display}>
                        {this.state.validateError.type=='invalid value'?
                            'Only english letters are available in this input'
                        : (this.state.validateError.type=='not found')?
                            'Nothing was found with this keyword. Try again'
                        :'Empty text field'
                        }

                    </p>
                </section>
                <ItemContainer initializeSearch={this.initializeSearch} searchList={this.state.searchItem}/>
            </div>
        )
    }
}

class ItemContainer extends React.Component{
    state={
        viewMain:true
    }
   //some codes
    showMain=()=>{
        this.setState({
            viewMain:true
        })
        this.props.initializeSearch();
        store.dispatch(backToMain());
    }

    render(){
        console.log('Item container');
        console.log(this.props);
        return(
            <section id="ItemContainer">
                {
                    this.props.searchList!=''?
                        <SearchList searchList={this.props.searchList} mainVisible={this.state.viewMain}/>
                    :
                        <ItemList toggleView={this.toggleView} mainVisible={this.state.viewMain}/>
                }
                <button onClick={this.showMain}>Back to main</button>
            </section>
        )
    }
}

const mapStateToProps =(state)=>{
    console.log('working');  //it doesn't show it.
    return{
        visible:state.visible
    }
};
const wrappedSearchList = connect(mapStateToProps,null)(ItemContainer);
const Root = () => (
    <Provider store={store}>
        <App/>
    </Provider>
);
ReactDOM.render(
    <Root/>,
    document.getElementById('App')
)

reduxAction.js

export function backToMain(){
        return{
            type:'BACK_TO_MAIN'
        }
    }

storeReducer.js

import {createStore} from 'redux';
import {backToMain} from './reduxAction';


export const initialState = {
    visible:true
}
export const store = createStore(viewMainReducer,initialState);
export function viewMainReducer(state=initialState,action){
    switch(action.type){
        case 'BACK_TO_MAIN':
            console.log('Back..');
            return{
                ...state,
                visible:true
            }
            break;
        default: return state;
    }
}

我真的是Redux的新手，所以也许我不太了解官方文档，但是我知道mapStateToProps必须将状态作为prop传递给组件。就我而言，该组件应该是ItemContainer组件。

问题是何时渲染ItemContainer组件。如果我用

检查

console.log(this.props)

在ItemContainer的render方法中的

，在控制台中，我只看到将initializeSearch和searchList传递给组件。我无法弄清楚为什么我的initialState对象的可见属性没有传递给组件。可能是什么原因？如何将可见属性传递给ItemContainer组件？

React / Redux: mapStateToProps not actually mapping state to props

阅读此主题，但我只是不明白...

Answer 1

尝试使用wrappedSearchList代替ItemContainer

<wrappedSearchList initializeSearch={this.initializeSearch} searchList={this.state.searchItem}/>**strong text**

我的mapStateToProps没有将道具传递给组件

1 个答案: