Удалить данные из API (jsonplaceholder) в ReactNative - PullRequest
Новая
       23

Удалить данные из API (jsonplaceholder) в ReactNative

0 голосов
/ 04 февраля 2020

Я пытаюсь удалить пользователя из jsonplaceholder, потому что хочу удалить элемент с помощью клика> / Это официальные документы / Удалить выборку ресурса ('https://jsonplaceholder.typicode.com/posts/1 ', {method:' DELETE '}) Важно: ресурс не будет действительно удален на сервере, но он будет подделан, как если бы.

/ Мой код / 

export default function App() {
  const [users, setUsers] = useState();  
  const pressHandler = (id) => {
    fetch(`https://jsonplaceholder.typicode.com/users/${id}`, {
      method: 'DELETE'
    })
      .then(() => {

        // Issue GET request after item deleted to get updated list
        // that excludes user of id
        return fetch(`https://jsonplaceholder.typicode.com/users`)
      })
      .then(res => res.json())
      .then(res => {
        setUsers(res);
      })
 }

  /* request API to json.placeholder to get users */
  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users') 
      .then(res => res.json())
      .then(res => {
        setUsers(res);
      })
  })

I’m trying in another way

export default function App() {
  const [users, setUsers] = useState();
  const pressHandler = (id) => {
    setUsers((prevUsers)=>{
      return prevUsers.filter(users => users.id != id)
    })
  }
}

но он хочет удалить ((это мой компонент приложения 

return (
    <View style={styles.container}>
      <Header />
      <View style={styles.content}>
        {/* to form */}
        <View style={styles.list}>
          <FlatList
            keyExtractor={item => item.id.toString()}  
            data={users}
            renderItem={({item}) => (
              <UserItem item={item} pressHandler={pressHandler}/>
            )}
          />
        </View>
      </View>
    </View>

и компонент UserItem 

export default function UserItem({ item, pressHandler }){
    return (
        <View style={styles.item}>
            <TouchableOpacity onPress={() => pressHandler(item.id)}>
                <Text style={styles.main}>Employee: {item.name}</Text>
                <Text style={styles.company}>Company: {item.company.name}</Text>
                <Text style={styles.rest}>City: {item.address.city}, street: {item.address.street}</Text>
                <Text style={styles.rest}>email: {item.email}</Text>
            </TouchableOpacity>
        </View>
    )
}
...