javascript - 无法发送仅更改 imageUri 和employeeBio 的 PUT 请求

Question

我从 WebAPI 获取了此数据，并希望更新 Web Api 中 imageUri 和 employeeBio 的值。我现在只能编辑 Bio，现在我想发送 PUT 请求来更新 imageUri 和 employeeBio 的值，但无法这样做。我的“保存”按钮的 onPress 方法似乎不起作用，因为按下按钮时我无法收到警报。谢谢!

这是网址中存在的 JSON 数据。

[
  {
    "imageUrl": "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1200px-React-icon.svg.png", 
    "departmentName": "Test Department", 
    "employeeName": "Test Employee", 
    "employeeBio": "Test Bio"
  }
]

这是 DataLoad.js 中配置文件数据的 PUT 方法。由于用户只能更改 Image 和 io，因此我们在调用 PUT 请求时仅接受 imageUrl 和 employeeBio 的值。

export function updateProfileData(params) {
  return fetch('http://www.json-generator.com/api/json/get/cgdMFRuLTm?indent=2', {
    method: 'PUT',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({params}),
  })
    .then((response) => response.json())
    .then((result) => {
      if (result === 'ok') {
        alert('Profile Updated Successfully!');
        this.setState({
          imageUrl: this.state.items[0].imageUrl,
          employeeBio: this.state.items[0].employeeBio
        })
      }
    })
    .catch((error) => {
      alert('Profile Update Failed!')
      console.log(`error = ${error}`);
    });
}

由于我对 React-Native 还很陌生，因此我不得不浏览多个视频和指南才能使 GET 请求正常工作。这就是我目前在 Profile.js 文件中调用 GET 请求和 PUT 请求的内容。

constructor(props) {
    super(props);
    this.state = {
      items: [],
      isLoaded: false,
      employeeName: '',
      departmentName: '',
      employeeBio: '',
      imageUrl: ''
    };
    this.getProfileData = getProfileData.bind(this);
    this.updateProfileData = updateProfileData.bind(this)
  }

  componentDidMount() {
    this.getProfileData();
  }



  render() {
    var { isLoaded } = this.state
    if (!isLoaded) {
      return (
        <View style={{ flex: 1, padding: 20 }}>
          <ActivityIndicator />
        </View>
      );
    } else {
      return (
        <View style={styles.container}>
          <View style={styles.piccontainer}>
            <Image
              onPress={() => this.props.navigation.navigate('Profile')}
              source={{ uri: this.state.items[0].imageUrl }}
              style={styles.photo} />
          </View>
          <View style={styles.textcontainer}>
            <View style={styles.listView}>
              <Text style={styles.label}>Name </Text>
              <Text style={styles.name}>{this.state.items[0].employeeName}</Text>
            </View>
            <View style={styles.listView}>
              <Text style={styles.label}>Department </Text>
              <Text style={styles.name}>{this.state.items[0].departmentName}</Text>
            </View>
            <View style={styles.listView}>
              <Text style={styles.label}>Bio </Text>
              <TextInput
                multiline={true}
                numberOfLines={4}
                style={styles.input}
                value={this.state.items[0].employeeBio}
                onChangeText={(text) => this.setState({
                  items: this.state.items.map((item, i) =>
                    i == 0 ?
                      { ...item, employeeBio: text } : item)
                })
                } />
            </View>
          </View>
          <View style={{ alignSelf: "center" }}>
            <TouchableOpacity style={styles.button}>
              <View>
                <Text style={styles.text}
                  onPress={() => {
                    let params = {
                      imageUrl: this.state.items[0].imageUrl,
                      employeeBio: this.state.items[0].employeeBio
                    };
                    updateProfileData(params);
                  }
                  } >
                  Save
                </Text>
              </View>
            </TouchableOpacity>
          </View>
        </View>
      )
    }
  }

已编辑:我现在可以更改该值，但仍然面临调用 PUT 请求和更新 Web API 上的值的问题。似乎我的 保存 按钮中的 onPress 方法无法正常工作，因为我没有收到显示我已成功更新个人资料的警报。再次感谢您的帮助!

Answer 1

首先是你提供的方法updateProfileData未在其定义中接收任何参数。

其次，您在onChange中使用扩展运算符的方式事件不是更改数组状态变量的正确方法。您可以在对象中执行此操作，但不能在数组中执行此操作。您需要更新数组中正确的对象，因为您应该使用某种循环机制来获取要更新的对象，因此您应该执行如下操作: this.setState({items: this.state.items.map((item, i) => i==0 ? {...item, bio: text} : item)});这里 i==0 适用于您的情况。您也可以动态地使用示例。希望这会有所帮助。