this.state.map 不是 React Native 中的函数

Question

我无法映射从 server.Always 获取的 responseData 在地图上出现错误 function.Following 是我的代码。

代码

已更新

  onPressSubmit() {
        fetch("http://xxxxxxx", {
          method: "POST",
          headers: {
            Accept: "application/json",
            "Content-Type": "application/json"
          },
          body: JSON.stringify({
            url: this.state.url
          })
        })
         .then((response) => response.json())
        .then((responseData) =>
        {
                this.setState({
                res:responseData,
                isLoading :false
                        }, () => { this.renderArticle()
                        });
            })
      }
renderArticle(){
      if(this.state.res && this.state.res.message && Object.values(this.state.res.message).length){
          return Object.values(this.state.res.message).map(ar =>
          <TouchableOpacity
        onPress={() => Actions.articleScreen({ unique: a.id })}
      >
        <CardSection>
          <View style={{ flexDirection: "row" }}>
            <Image
              source={{ uri: ar.image }}
              style={styles.thumbnail_style}
            />
            <Text style={styles.textStyle}>{ar.title}</Text>
          </View>
        </CardSection>
      </TouchableOpacity>
          );
      }else {
      return null;

      }
  }

    render(){
        return(
        <ScrollView>

            {article.map(a => (
              <TouchableOpacity
                onPress={() => Actions.articleScreen({ unique: a.id })}
              >
                <CardSection>
                    <Text style={styles.textStyle}>{a.title}</Text>
                </CardSection>
              </TouchableOpacity>
            ))}
         {this.renderArticle()}
            <Icon
              raised
              name="plus"
              type="font-awesome"
              color="#f49241"
              underlayColor="#f44941"
              onPress={() => this.popupDialog.show()}
            />
            <PopupDialog
              ref={popupDialog => {
                this.popupDialog = popupDialog;
              }}
              dialogStyle={{ backgroundColor: "#f2ddd5", height: 100 }}
              containerStyle={{ zIndex: 50, elevation: 100 }}
              overlayBackgroundColor="#000"
              dismissOnTouchOutside={true}
            >
            <View>
                <TextInput
                  style={{ height: 40 }}
                  placeholder="Enter the url you want to save!"
                  multiline
                  onChangeText={url => this.setState({ url })}
                  underlayColor="#fcc9b5"
                />

                <Button
      title='Ok' 
      onPress={() =>
     this.onPressSubmit()
        }/>
     </View>
            </PopupDialog>
         </ScrollView>

我不确定我做的是否正确，请指导我..这有什么问题 code.Also renderArticle 中的控制台输出如下

Answer 1

您正在使用 map method，这是一个仅存在于 Array 原型上的函数。数组可以被映射，因为它们是项目列表，但您要映射的项目 (this.state.message) 是一个对象。

这是有道理的，因为您只请求一篇特定的 Medium 文章。您可以通过手动访问对象键将其渲染到 DOM。

const { title } = this.state.res.message;

return (
  <View>
    <TouchableOpacity onPress={() => console.log("hii")}
      <CardSection>
        <Text>{title}</Text>
      </CardSection>
    </TouchableOpacity>
  </View>
);

Answer 2

this.state.res.message 是对象而不是数组。所以它给出了错误。

您的问题的解决方案可以是：

renderArticle(){
  if(this.state.res && Object.values(this.state.res).length){
    return Object.values(this.state.res).map(ar => 
         //Your Previous Code
    );
  } else{
    return null
  }
}

您应该在 render 函数中而不是在 onPressSubmit 中调用此方法。

render(){
 return(
   <View>{this.renderArticle()}</View>
 )
}

this.state.map 不是 React Native 中的函数

this.state.map is not a function in React Native

javascript

reactjs

react-native

map-function