Проблема с обновлением данных с запросом POST на React

Question

У меня проблема с отправкой данных. Допустим я отредактировал одну ячейку в строке, а две остались нетронутыми. Когда я вывожу результат своего запроса(data), я вижу, что только измененная ячейка отправляется как положено, а остальные undefinded. Как сделать так, чтобы отправлялись неизмененные значения тоже?

Я думаю, что мне нужно передать состояние из App.js 'characters'. Возможно ошибаюсь. Если и правда нужно состояние передать, то как его передать в стейт?

Подскажите пожалуйста, в чем мои ошибки? Прилагаю пример данных json на сервере, Table.js, App.js

class Table extends Component {
    state = {
        isEdit: false,
    }

    onChange = (event) => {
        const { name, value } = event.target;

        this.setState(state => ({
            data: {
                ...state.data,
                [name]: value,
            }
        }));
    }

    saveChange = async (_id) => {

        const data = {
            data: {
                name: this.state.data.name,
                email: this.state.data.email,
                age: this.state.data.age,
            },
        };

        await fetch('http://178.128.196.163:3000/api/records/' + _id, {
            method: 'POST',
            body: JSON.stringify(data),
        })
            .then(() => {console.log(data)})
            .then(() => console.log(_id));
        this.state.isEdit = false;
    }

    onEdit(_id) {
        window.localStorage.setItem("personaId", _id);
        this.state.isEdit = true;
        this.state._id = _id;
    }

    cancelChange() {
        this.state.isEdit = false;
    }


    render() {
        const {characterData, removeCharacter} = this.props;
        const isChange = this.state.isEdit;
        const {name, email, age} = this.state;

        return(
            <table>
                <thead>
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Age</th>
                    <th>Actions</th>
                </tr>
                </thead>
                <tbody>
                {characterData.map((row, _id) => {
                    return (
                        <tr key={row._id}>
                            {isChange && window.localStorage.getItem("personaId") === row._id ?
                                <td><input type='text'
                                           name='name'
                                           id='name'
                                           defaultValue={row.data.name}
                                           value={name}
                                           onChange={this.onChange} />
                                </td> : <td>{row.data.name}</td>}
                            {isChange && window.localStorage.getItem("personaId") === row._id ?
                                <td><input type='text'
                                           name='email'
                                           id='email'
                                           defaultValue={row.data.email}
                                           value={email}
                                           onChange={this.onChange} />
                                </td> : <td>{row.data.email}</td>}
                            {isChange && window.localStorage.getItem("personaId") === row._id ?
                                <td><input type='text'
                                           name='age'
                                           id='age'
                                           defaultValue={row.data.age}
                                           value={age}
                                           onChange={this.onChange} />
                                </td> : <td>{row.data.age}</td>}
                            {isChange && window.localStorage.getItem("personaId") === row._id ?
                                <td>
                                    <button onClick={() => this.saveChange(row._id)}>Save</button>
                                    <button onClick={() => this.cancelChange()}>Cancel</button>
                                </td> :
                                <td>
                                    <button onClick={() => this.onEdit(row._id)}>Edit</button>
                                    <button onClick={() => removeCharacter(row._id)}>Delete</button>
                                </td>
                            }
                        </tr>
                    )
                })}
                </tbody>
            </table>
        )
    }
}
export default Table;

import React, { Component } from 'react';
import './App.css';
import Table from './Table';
import Form from './Form'

class App extends Component {
    state = {
        characters: [],
        isUpdate: false,
    }

    async componentDidMount() {
        await this.getPeople();
    }

    async componentDidUpdate() {
        await this.getPeople();
    }

    async getPeople() {
        await fetch ("http://178.128.196.163:3000/api/records")
            .then((result) => result.json())
            .then((result) => this.setState({characters: result,}))
            .catch(error => console.log(error));
    }


    removeCharacter = (_id) => {
        const {characters} = this.state;

        this.setState({
            characters: characters.filter((character, i) => {
                return i !== _id;
            })
        })

        fetch('http://178.128.196.163:3000/api/records/' + _id, {
            method: 'DELETE',
        })
            .then((result) => {
                return result.json();
            })
            .catch((error) => console.log(error))
    }

    render() {
        const {characters} = this.state;
        return (
            <div className='container'>
                <h1>React Table</h1>
                <p>Add a character with a name, an email and an age to the table.</p>
                <Table
                    characterData={characters}
                    removeCharacter={this.removeCharacter} />
                    <h3>Add New</h3>
                <Form />
            </div>
        )
    }
}

export default App;

БЛОГ НА HUSL

Проблема с обновлением данных с запросом POST на React

Ответы (0 шт):