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

我从WebAPI提取了这些数据，并想更新Web Api中imageUri和employeeBio的值。我现在只能编辑简历，现在我想发送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方法无法正常工作，因为我没有收到警告，表明我已成功更新配置文件。再次感谢您的帮助！

最佳答案

首先，您提供的updateProfileData方法在其定义中没有收到任何参数。

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

关于javascript - 无法发送仅更改imageUri和employeeBio的PUT请求，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59793682/