Где / как запустить повторную визуализацию после операции CRUD? - PullRequest
Новая
       80

Где / как запустить повторную визуализацию после операции CRUD?

0 голосов
/ 29 сентября 2019

Я создал простое приложение для телефонной книги CRUD, в котором я могу добавлять и удалять людей / номера / идентификаторы на json-сервере.Когда я делал добавление, оно работало правильно и перерисовывалось, как и ожидалось.

Однако, когда я попытался осуществить удаление, операция удаления прошла до базы данных, но я не могу перерисовать интерфейс.

Я попытался передать компонент состояния в операцию удаления, но, похоже, это испортило его.

Я попытался использовать функцию refresh () для запуска повторного рендеринга, но не могуuseEffect () внутри функции.

Это мое основное приложение 

import React from 'react'
import { useState , useEffect } from 'react'
import Numbers from './Numbers'
import Person from './Person'
import PersonForm from './PersonForm'
import Filter from './Filter'
import phoneService from './services/apiMethod'

const AppPhoneBook = () => {

    const [persons, setPersons] = useState([])
    const uuidv4 = require('uuid/v4');
    const [newName, setNewName] = useState('enter a name...')
    const [newNumber, setNewNumber] = useState('enter a number...')
    const [nameToSearch, setNameToSearch] = useState('')
    const nameToShow = persons.filter(person => person.name.toLowerCase().includes(nameToSearch.toLowerCase()))

    useEffect(()=>{
        phoneService
        .getAll()
        .then(response => {
            console.log(response.data)
            setPersons(response.data)
        })
    }, [])

    const refresh = () => {
        console.log(persons)
    }

    const row = () => nameToShow.map(person => 
        <Numbers
            key = {uuidv4()}
            person = {person.name}
            number = {person.number}
            id = {person.id}
            refresh  = {refresh}
        />
    )

    const test = (event) => {
        console.log(persons.filter(person => person.name.includes(event.target.value)))
    }

    const handleNameChange = (event) => {
        setNewName(event.target.value)
        // console.log(event.target.value)
    }

    const handleNumberChange = (event) => {
        setNewNumber(event.target.value)
        // console.log(event.target.value)
    }

    const handleNameSearchChange = (event) => {
        setNameToSearch(event.target.value)
        console.log(persons.filter(person => person.name.includes(event.target.value)))
    }

    const addName = (event) => {
        event.preventDefault()
        console.log(persons.filter(person => console.log(person.name, newName))>0)

        if (persons.filter(person => person.name === newName).length>0) {
            window.alert(`${newName} is already in the phonebook !!!`)
        } else if (!newName || !newNumber) {
            window.alert('please provide both name and number')
        } else {
            const newNameObject = {
                name : newName,
                number : newNumber,
                id : uuidv4(),
            }

            phoneService
            .create(newNameObject)
            .then(response => {
                setPersons(persons.concat(newNameObject))
                setNewName('')
            })
        }
    }

    const clearNameInput = (event) => {
        event.preventDefault()
        setNewName('')
    }

    const clearNumberInput = (event) =>{
        event.preventDefault()
        setNewNumber('')
    }

    return (
        <div>
            <Filter nameToSearch={nameToSearch} handleNameSearchChange={handleNameSearchChange} test={test}/>
            <PersonForm newName={newName} handleNameChange={handleNameChange} clearNameInput={clearNameInput} 
            newNumber={newNumber} handleNumberChange={handleNumberChange} clearNumberInput={clearNumberInput} addName={addName}/>
            <Person row={row()} />
        </div>
    )
}

export default AppPhoneBook

Здесь я пытался реализовать операцию удаления 

import React, {useEffect} from 'react'
import phoneService from './services/apiMethod'

const Numbers = ({person,number,id,refresh}) => {
    const deleteName = () =>{
        window.confirm(`Delete ${person} ?`)
        const nameToDelete = {
            name : person,
            number : number,
            id : id,
        }
        console.log(nameToDelete)

        phoneService
        .deleteName(id,nameToDelete).then(response => {
            console.log(response)
            refresh()
        }

        )
    }

    return (
        <>
            <li>
                {person} : {number} (id = {id})
                <button type='button' onClick={deleteName}> delete</button>
            </li>

        </>
    )
}

export default Numbers

Редактировать: я добавляюмой apiMethod здесь также на всякий случай 

import axios from 'axios'
const baseUrl = 'http://localhost:3001/person'

const getAll = () => {
    return axios.get(baseUrl)
}

const create = newObject => {
    return axios.post(baseUrl,newObject)
}

const update = (name, newObject) => {
    return axios.put(`${baseUrl}/${name}`, newObject)
}

const deleteName = (id, newObject) => {
    return axios.delete(`${baseUrl}/${id}`)
} 

export default {
    getAll : getAll,
    create : create,
    update : update,
    deleteName : deleteName
}

1 Ответ

0 голосов
/ 29 сентября 2019

Я смог найти способ, используя созданную мной функцию refresh ().Пожалуйста, прокомментируйте, если это лучший способ сделать это.

Я передал {person} в функцию обновления, затем просто отфильтровал тот, который был удален, и обновил состояние до оставшегося массива имен. 

...
const Numbers = ({person,number,id,refresh}) => {
    const deleteName = () =>{
        window.confirm(`Delete ${person} ?`)
        const nameToDelete = {
            name : person,
            number : number,
            id : id,
        }
        console.log(nameToDelete)

        phoneService
        .deleteName(id,nameToDelete).then(response => {
            console.log(response)
            refresh({person})
        }

        )
    }
...

refresh () 

    const refresh = ({person}) => {
        console.log(persons)
        const newNameSetAfterDelete = persons.filter(eachPerson => !eachPerson.name.includes(person))
        setPersons(newNameSetAfterDelete)
    }
...