反应原生博览会错误。未定义不是对象（评估 item.basicData.criminalName）

Question

const SearchContext = React.createContext();
class SearchProvider extends Component {
  state = {
    tfG: false,
    aboutToSearch: "criminals",
  };

  render() {
    return (
      <SearchContext.Provider
        value={{
          state: this.state,
          changeAboutToSearch: (value) => {
            if (value == true) {
              console.log(value);
              this.setState({ aboutToSearch: "gangNames", tfG: true });
            } else {
              this.setState({ aboutToSearch: "criminals", tfG: false });
            }
          },
        }}
      >
        {this.props.children}
      </SearchContext.Provider>
    );
  }
}
class SearchBox extends Component {
  render() {
    return (
      <SearchContext.Consumer>
        {(context) => (
          <>
            <View
              style={{
                marginTop: 30,
                alignItems: "center",
                justifyContent: "center",
              }}
            >
              <View style={{ flexDirection: "row" }}>
                <View>
                  <Text>{context.state.tfG ? "Gangs" : "Criminals"}</Text>
                  <Switch
                    onValueChange={context.changeAboutToSearch}
                    value={context.state.tfG}
                  />
                </View>
                <Item rounded style={{ width: "65%" }}>
                  <Label style={{ textAlign: "right", fontWeight: "bold" }}>
                    <AntDesign name="search1" size={24} color="black" />
                  </Label>
                  <Input
                    onChangeText={(query) => {
                      this.props.refine(query);
                    }}
                    placeholder={"Search Criminals/Gangs"}
                    placeholderTextColor={"black"}
                    clearButtonMode={"always"}
                    clearButtonMode={"always"}
                    spellCheck={false}
                    autoCorrect={false}
                    autoCapitalize={"none"}
                  />
                </Item>
              </View>
            </View>
          </>
        )}
      </SearchContext.Consumer>
    );
  }
}
const ConnectedSearchBox = connectSearchBox(SearchBox);
class InfiniteHits extends Component {
  onEndReached = () => {
    if (this.props.hasMore) {
      this.props.refine();
    }
  };
  render() {
    return (
      <SearchContext.Consumer>
        {(context) => (
          <>
            <FlatList
              renderItem={({ item }) => (
                  {context.state.tfG ? (
                    
                      
                            <Text>{item.addGang}</Text>
                          
                  ) : (
                
                     
                            <Text>{item.basicData.criminalName}</Text>
                    
                  )}
              )}
              data={this.props.hits}
              keyExtractor={(item) => item.objectID}
              onEndReached={this.onEndReached}
            />
          </>
        )}
      </SearchContext.Consumer>
    );
  }
}
const ConnectedInfiniteHits = connectInfiniteHits(InfiniteHits);
export default class InitialDb extends Component {
  constructor(props) {
    super(props);
    this.state = {
      Gangs: "",
      criminals: "",
      loading: false,
    };
  }
  render() {
    const searchClient = algoliasearch(
      "asdf",
      "asdf"
    );
    return (
      <SearchProvider>
        <SearchContext.Consumer>
          {(context) => (
            <>
              <SafeAreaView>
                <BackButton />
                <View>
                  <InstantSearch
                    searchClient={searchClient}
                    indexName={context.state.aboutToSearch}
                  >
                    <ConnectedSearchBox />
                    <ConnectedInfiniteHits />
                  </InstantSearch>
                </View>
              </SafeAreaView>
            </>
          )}
        </SearchContext.Consumer>
      </SearchProvider>
    );
  }
}

在上面的代码中，在 SearchProvider 类中，我将它用作上下文提供者类（Context API），而 SearchBox 类，我正在使用它来搜索 algolia 搜索，在 InfiniteHits 类中我正在使用它以显示结果。在 InitialDb 类中，我正在渲染所有内容。在这里，我的 algolia indeces 中有 2 个集合，它们具有不同类型的对象（gangNames 和犯罪分子）。我想根据打开或关闭来填充它。如果它打开，那么应该填充 gangNames 索引对象，如果它关闭，那么应该填充犯罪索引。默认情况下它是关闭的（假/犯罪索引将填充），如果我打开它（真）然后我得到 gangNames 索引，但如果我再次将它切换为关闭（对于罪犯索引为假），那么我得到“未定义不是对象错误” Here Im attaching the screenshot, This is the error what I'm getting

Answer 1

很可能item.basicData 不是对象，而您正试图访问非对象的属性。您可以尝试使用：item.basicData && item.basicData.criminals 或如果可用，item.basicData?.criminals。