React Native - TypeError：null 不是对象答案

【问题标题】：React Native - TypeError: null is not an objectReact Native - TypeError：null 不是对象
【发布时间】：2019-10-17 07:03:13
【问题描述】：

我仍在学习本机反应，我正在尝试从 API 检索数据并将其作为自定义单选按钮返回，但如果我调用 API，我会收到此错误：

null 不是对象（评估 'this.props.activities.map'）

 {this.props.activities.map((val, index) => {
    let { key, type, placeholder } = val;

    if (type === "selection") {
      var buttons = [];

      placeholder.forEach((e, index) => {
        var selectedButton = img.findButton(e, true);
        var normalButton = img.findButton(e);

        buttons.push(
          <RadioButton
            key={index}
            value={e}
            element={<Image source={selectedButton} />}
            selectedElement={<Image source={normalButton} />}
            onPress={() => this.changeSelection(key, e)}
            selected={this.state[key]["value"]}
          />
        );
      });

      var rows = [],
        columns = [];
      var i = 0;

      buttons.forEach((e, index) => {
        rows.push(e);
        i++;

        if (i === 2 || index === buttons.length - 1) {
          //max buttons per row
          i = 0;
          columns.push(
            <View key={index} style={{ flex: 1, flexDirection: "row" }}>
              {rows}
            </View>
          );
          rows = [];
          i = 0;
        }
      });

      return (
        <View key={key} style={{ flex: 1, margin: normalize(20) }}>
          {columns}
        </View>
      );
    }
  })}

“this.props.activites”来自这个

let initialState = {
    activities: null,

};

export default function mainReducer(state = initialState, action) {
    switch (action.type) {
        case t.RECEIVE_ACT:
            return Object.assign({}, state, { actReceived: true, activities: action.activities });
        case t.EMPTY_ACT:
            return Object.assign({}, state, { actReceived: false, activities: null });
        default:
            return state;
    }
}

不知道怎么变成null了

【问题讨论】：

标签： javascript reactjs react-native

【解决方案1】：

activities 的初始状态是null。因此，在您从您的 api 获得响应之前，React 会使用 null 值呈现您的代码部分。您可以将 activities: [] 作为初始值，也可以在 map 函数之前（如果它为 null 或不为空），例如

{this.props.activities && this.props.activities.map((val, index) => {...

如果你打算使用activities: []，那么你仍然可以在你的地图之前进行检查，虽然它是可选的但仍然很好，例如;

{this.props.activities.length && this.props.activities.map((val, index) => {...

【讨论】：

【解决方案2】：

this.props.activities 来自哪里？

它是异步的吗，因为它似乎在某个时刻是null。

如果您添加以下行，您应该不会再看到此错误。

this.props.activities && this.props.activities.map(.....

【讨论】：

如果添加以下行会发生什么？这看起来不完整
那怎么是空的？
@Rajesh 不完整? 我去泡咖啡忘记更新了
@BillyRonaldoChandra 更新了问题。我希望也许您可以提供更多信息，说明为什么activities 可能是null

【解决方案3】：

Paul 的回答是防弹的，但您也可以使用默认值来避免 falsy values

YourComponent.defaultProps = {
    activities: []
}

【讨论】：