ReactNative/Redux：基于componentWillReceiveProps中派生的值的条件组件

Question

在场景中按下 'Add' 按钮时，导航栏应设置为隐藏，'renderAddCategory' 中的组件需要设置为可见。

按下添加按钮时，Actions.refresh({hideNavbar:true}) 会将导航栏设置为隐藏。这反过来调用 componentWillReceiveProps，其中设置了标志 showAddCategory。根据 'showAddCategory' 标志中设置的值，'renderAddCategory' 中的组件需要 show/hide 组件。

请协助我需要在“<<< showAddCategory >>>>>”中替换什么才能达到要求。

<Scene key="CategoryContainer" component={CategoryContainer} title="Category" initial 
rightTitle="Add" onRight={() => Actions.refresh({hideNavBar: true})}/>

组件：

componentWillReceiveProps(nextProps){
if(nextProps.hasOwnProperty('hideNavBar') && nextProps.hideNavBar){
  if(!nextProps.showAddCategory){
    nextProps.onCategoryAddMenu();
    console.log(nextProps.showAddCategory); // returns new value: true
    console.log(this.props.showAddCategory); // returns old value: false
  }
 }
}

render() {
return (
  <View style={styles.container}>
    {this.renderAddCategory()}
  </View>
);}

renderAddCategory(){
  if(<<< showAddCategory >>>>>){
    return (
      <View>
        <TextInput/>
        <TouchableHighlight>
          <Text>Add</Text>
        </TouchableHighlight>
      </View>
    );
 }
}     

const mapStateToProps = (state) => {
  return {
    showAddCategory: state.categoryReducer.showAddCategory,
  };
}

操作：

export function categoryAddMenu(){
return {
  type: "CATEGORY_ADD_MENU",
};
}

减速器：

const initialState = {
  showAddCategory:false,
} 

export default function categoryReducer (state = initialState, action) {        
    case "CATEGORY_ADD_MENU":
    return Object.assign({}, state, {
      showAddCategory: true
    });
}

Answer 1

我不确定你的做法是否正确。但我认为您的问题可以使用本地状态来解决。你真的需要使用 redux 来存储 showAddCategory 吗？

componentWillReceiveProps(nextProps){
if(nextProps.hasOwnProperty('hideNavBar')){
   this.setState({ showAddCategory: nextProps.hideNavBar });
 }
}

那么您应该可以将 <<< showAddCategory >>>>> 替换为 this.state.showAddCategory

renderAddCategory(){
  if(this.state.showAddCategory) {
    return (
      <View>
        <TextInput/>
        <TouchableHighlight>
          <Text>Add</Text>
        </TouchableHighlight>
      </View>
    );
 }
}

您可能还需要将父 "this" 绑定到构造函数中的 renderAddCategory 函数。

 constructor(props) {
    super(props);
    this._renderPage = this._renderPage.bind(this);
  }

ReactNative/Redux：基于componentWillReceiveProps中派生的值的条件组件

ReactNative/Redux: conditional component based on the value derived in componentWillReceiveProps

react-native

react-redux