Show/hide 的组件即使在商店更新后也无法正常工作

Question

我有一个页面分为 3 个组件，我搜索地址并在下面显示隐藏的组件和数据

class SignPage extends Component {
constructor(props) {
    super(props);
}
render() {
const {showChild} = this.props;
return (
    <div className="container-fluid">
        <div className="row">
            <div className="col-md-12 col-md-offset-12">
                <Search />
            </div>
        </div>
        <br/>
        <div className="row">
            <div className="col-md-4 col-md-offset-4"> 
                {this.props.show && <Signform showChild{showChild}/>}
            </div>
            <div className="col-md-8 col-md-offset-8">
                {this.props.show && <ContractWriter/> }
            </div>
        </div> 
    </div>
)}
}

const mapStoreToProps = (store) => {return {main: store.main}}

export default connect(mapStoreToProps, {showChild}(SignPage)

我的搜索组件的代码是

class SearchComponent extends Component {
constructor(props) {
    super(props);

    this.onChange = this.onChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
}

onChange (e){
    this.setState({[e.target.name]: e.target.value});
}
onSubmit (e){
    e.preventDefault();
    var display;
    var outcome;
    var conf = contract(Mycont)
    conf.setProvider(this.state.web3.currentProvider)
    conf.at(this.state.contaddress)
    .then((instance) => {conf = instance
        return conf.get()
    })
    .then((result) => {console.log(result)
                        display = true
                        outcome = result
                        console.log(this.state.show)})
    .then(() => this.props.dispatch(showChild(outcome, display)))
}

render() {
    return (
        <div className="input-group">
            <input type="BigNumber" 
                    className="form-control" 
                    placeholder="Enter address..."
                    value = {this.state.contaddress}
                    onChange = {this.onChange}
                    name = "contaddress"/>
            <span className="input-group-btn">
                <button className="btn btn-default" 
                    onClick = {this.onSubmit}
                    type="button">
                    Search Contract
                </button>
            </span>
            <br/>
        </div>
    )
}
 }

 const mapStoreToProps = (store) => {
return {
    main: store.main
}
 }

我的行动是

export function showChild(result, show) {
    return {
      type: "SHOW_CHILD",
      payload: {
          result        : result,
          show          : show
     }
   }
 }

减速器是

module.exports = {
main: (state={
   b  : null,
   c  : null,
   d  : null,
   e  : null,
   result : null,
   show   : true
 }, action) => {case 'SHOW_CHILD':
    return {
      ...state,
      result : action.payload.result,
      show   : action.payload.show
    }

现在即使我的商店更新了结果并显示为 true 但我的 UI 没有反映任何东西......我的隐藏组件没有显示并且字段没有更新。

我是 React 和 redux 的新手。非常感谢任何帮助

Answer 1

您似乎在引用 this.props.show，但在您的 mapStoreToProps 中您没有将 show 传递到您的组件中。可能想改用 this.props.main.show :)

Show/hide 的组件即使在商店更新后也无法正常工作

Show/hide of components not working even when the store is updated

show-hide

reactjs

react-redux