React Native：如何识别广告对象中的布尔属性并做逻辑处理

嘿，我来帮你搞定这个问题！从你的描述和代码片段来看，你是在Redux环境下开发跨iOS/Android的广告应用，核心需求就是拿到广告对象的ReceiveHelp布尔属性，然后根据它的值设置背景色。下面是一步步的解决方案：

1. 确保从Redux Store中获取广告对象 #

首先，你的publicAdFetch应该是一个异步Redux Action，用来从接口拉取广告数据并把它存入Store。那在你的组件里，需要先把这个广告对象取出来：

函数组件（推荐用React Hooks） #

用useSelector从Store中获取广告数据：

import { useSelector, useDispatch } from 'react-redux';
import { publicAdFetch } from './your-action-file-path';
import { useEffect, View } from 'react-native';

const AdDisplayComponent = () => {
  // 触发广告数据获取
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(publicAdFetch());
  }, [dispatch]);

  // 从Store中取出广告对象，这里的state路径要和你的Reducer结构对应
  const ad = useSelector(state => state.adStore.ad);

类组件 #

如果用类组件，就用connect高阶函数映射Store数据到组件props：

import { connect } from 'react-redux';
import { publicAdFetch } from './your-action-file-path';
import { View } from 'react-native';
import React from 'react';

class AdDisplayComponent extends React.Component {
  componentDidMount() {
    this.props.publicAdFetch();
  }

  // ...
}

const mapStateToProps = state => ({
  ad: state.adStore.ad,
});

export default connect(mapStateToProps, { publicAdFetch })(AdDisplayComponent);

2. 访问ReceiveHelp属性并设置背景色 #

拿到广告对象后，直接通过点语法访问ReceiveHelp布尔属性就可以了。这里要注意JS是大小写敏感的，确保属性名和后端返回的完全一致。

另外，因为广告数据是异步获取的，初始时ad可能是null或undefined，所以一定要用**可选链操作符?.**避免报错：

// 函数组件内继续写
const containerStyle = {
  backgroundColor: ad?.ReceiveHelp ? 'blue' : 'red',
  width: '100%',
  height: 200, // 示例高度，根据你的需求调整
};

return (
  <View style={containerStyle}>
    {/* 这里放你的广告内容，比如图片、文案等 */}
  </View>
);

如果是类组件，就在render方法里处理：

render() {
  const { ad } = this.props;
  const containerStyle = {
    backgroundColor: ad?.ReceiveHelp ? 'blue' : 'red',
    width: '100%',
    height: 200,
  };

  return <View style={containerStyle}>{/* 广告内容 */}</View>;
}

3. 补充：确保Reducer正确处理广告数据 #

为了让Store能正确存储广告数据，你的Reducer要处理publicAdFetch dispatch的成功动作，比如：

// adReducer.js
const initialState = {
  ad: null,
  isLoading: false,
  error: null,
};

export const adReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_AD_REQUEST':
      return { ...state, isLoading: true };
    case 'FETCH_AD_SUCCESS':
      return { ...state, isLoading: false, ad: action.payload };
    case 'FETCH_AD_FAILURE':
      return { ...state, isLoading: false, error: action.payload };
    default:
      return state;
  }
};

对应的完整publicAdFetch Action：

export const publicAdFetch = () => {
  return async (dispatch) => {
    dispatch({ type: 'FETCH_AD_REQUEST' });
    try {
      // 替换成你的实际广告API地址
      const response = await fetch('https://your-ad-api.com/get-ad');
      const adData = await response.json();
      dispatch({ type: 'FETCH_AD_SUCCESS', payload: adData });
    } catch (error) {
      dispatch({ type: 'FETCH_AD_FAILURE', payload: error.message });
    }
  };
};

关键注意点 #

• 确认ReceiveHelp的拼写和大小写完全匹配后端返回的属性名，JS对大小写很敏感！
• 用?.处理数据未加载的状态，避免Cannot read property 'ReceiveHelp' of undefined错误
• 如果需要处理加载中状态，可以结合isLoading在组件里显示加载动画

内容的提问来源于stack exchange，提问作者Japaleno