невозможно отправить запрос PUT, изменяя только imageUri и employeeBio - PullRequest
Новая
       28

невозможно отправить запрос PUT, изменяя только imageUri и employeeBio

0 голосов
/ 17 января 2020

Я получил эти данные из WebAPI и хотел бы обновить значение imageUri и employeeBio в Web Api. Сейчас я могу редактировать только Био, и теперь я хотел бы отправить запрос PUT, чтобы обновить значения imageUri и employeeBio, но не смог этого сделать. Мой onPress метод кнопки «Сохранить», похоже, тоже не работает, так как я не могу получить уведомление при нажатии кнопки. Спасибо!

Это данные JSON, присутствующие в URL. 

[
  {
    "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"
  }
]

Это метод PUT для профиля Данные в DataLoad. js . Поскольку пользователи могут изменять только Image и io, мы принимаем значения imageUrl и employeeBio только при вызове запроса PUT. 

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 работать. Это то, что у меня есть в моем профиле. 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 и обновлением значения в веб-API. Кажется, что мой метод onPress в кнопке Сохранить не работает должным образом, так как я не получаю предупреждение о том, что я успешно обновил профиль. Еще раз спасибо за помощь!

1 Ответ

1 голос
/ 17 января 2020

Во-первых, предоставленный вами метод updateProfileData не получает никаких параметров в своем определении.

Во-вторых, то, как вы используете оператор распространения в событии onChange, не является правильным способом изменения переменной состояния. который является массивом. Вы можете сделать это в объекте, но не в массиве. Вам нужно обновить правильный объект в массиве, для этого вы должны использовать какой-то механизм зацикливания, чтобы добраться до обновляемого объекта, поэтому вы должны сделать что-то вроде этого: this.setState({items: this.state.items.map((item, i) => i==0 ? {...item, bio: text} : item)}); Здесь i == 0 работает для вашего случая. Вы также можете использовать пример динамически. Надеюсь, это поможет.

...