Блог

У меня есть существующая задача с названием и описанием, и я хочу перейти к форме редактирования. По умолчанию я хочу, чтобы существующие значения заголовка и описания заполняли входные данные с помощью React. Важная часть этого кода, о которой я спрашиваю, заключается value={task.title} в следующем . Пожалуйста, не обращайте внимания на то, как поступают данные (я новичок в реагировании и экспериментирую). Дескрипторы onChange и onSubmit работают правильно, но ошибка, очевидно, указывает на то, что я делаю это неправильно, и это вызывает случайные ошибки.

Я также пытался абстрагировать эти значения в какое-то состояние formValues, но независимо от того, как вводятся значения, если value={howeverIDoIt} ими непосредственно манипулируют, я получаю ошибку.

 import React, { useEffect, useState } from 'react';
import { HEADERS, TODO_URL } from '../urls';
import { useHistory, useParams } from 'react-router-dom';

const TaskEdit = () => {
    const [task, setTask] = useState({});
    const { id } = useParams();
    const history = useHistory();

    useEffect(() => {
        fetch(`${TODO_URL}/api/tasks/${id}/`, {headers: HEADERS})
          .then(response => response.json())
          .then(responseJson => {
              setTask(responseJson);
          });
    }, []);

    const handleChange = (e) => {
        setTask(e.target.value)
    }

    const handleSubmit = (e) => {
        e.preventDefault();
        const body = {
            'title': e.target.form[0].value,
            'description': e.target.form[1].value
        }
        fetch(
            `${TODO_URL}/api/tasks/${id}/edit/`,
            {
                headers: HEADERS,
                method: 'PUT',
                body: JSON.stringify(body)
            }
        ).then(res => res).catch(err => err);
        history.push(`/task/${id}`)
    }

    return (
        <form>
            <div>
                <label>Title</label>
                <input type="text" onChange={handleChange} value={task.title} />
            </div>
            <div>
                <label>Description</label>
                <textarea onChange={handleChange} value={task.description}></textarea>
            </div>
            <button onClick={handleSubmit}>Submit</button>
        </form>
    );
}

export default TaskEdit;

 

Я попытался ввести значение по умолчанию для useState следующим образом: useState({title: 'title', description: 'description'}) но это не предотвращает ошибку и не добавляет эту форму редактирования в Task.js компонент, где task наиболее определенно определен.

У тебя есть:

 <input type="text" onChange={handleChange} value={task.title} />
 

Ваш handleChange метод заключается в:

 const handleChange = (e) => {
        setTask(e.target.value)
}
 

Когда вы onChange сработаете, вашему task состоянию будет присвоено значение строки (значение <input /> )

Поэтому, когда вы ссылаетесь task.title после своих onChange пожаров, это будет неопределенно. То же самое верно и для task.description .

Попробуйте это:

 const handleTitleChange = (e) => {
  setTask({...task, title: e.target.value})
}

const handleDescriptionChange = (e) => {
  setTask({...task, description: e.target.value})
}

<input type="text" onChange={handleTitleChange} value={task.title} />
<textarea onChange={handleDescriptionChange} value={task.description} />
 

В качестве альтернативы вы можете разделить task состояние на title и description , соответственно.