无法发送PUT请求，只能更改imageUri和employeeBio

Question

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

这是url中存在的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}`);
    });
}

由于我仍然是相当新的反应-本地人，我不得不浏览多个视频和指南，以使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上的值的问题。我的onPress方法在保存按钮中似乎没有正常工作，因为我没有收到显示我已成功更新配置文件的警报。再次感谢你的帮助！

Answer 1

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

其次，在onChange事件中使用state运算符的方式并不是改变状态变量(即数组)的正确方式。您可以在对象中这样做，但不能在数组中这样做。您需要在数组中更新正确的对象，因此您应该使用一些循环机制来到达要更新的对象，因此您应该这样做：this.setState({items: this.state.items.map((item, i) => i==0 ? {...item, bio: text} : item)});这里，i==0适用于您的情况。您也可以动态地使用示例。希望这能有所帮助。