как поменять текст в тэге react с помощью put запроса через axios?

Question

у меня есть элемент который отрисовывается с помощью апи

export const CurrentCard = () => {
  const { id } = useParams();
  const [items, setItems] = useState([]);
  const [editText, setEditText] = useState(false);
 

  const client = Axios.create({
    baseURL: "https://jsonplaceholder.typicode.com/posts",
  });
  useEffect(() => {
    client.get(`/${id}`).then((response) => {
      setItems(response.data);
    });
  }, [id,items]);
   


 const  handleChange = event => {
   
    items.title =  event.target.value;
    setItems(items);
 }


  return (
    <div className={style.card}>
      {items && (
        <div className={style.card__box}>
          {editText ? (
            <>
              {" "}
              <div className={style.redact__form}>
                <input />
                <input />
              </div>{" "}
              <button onClick={() => handleChange(items.title)}> save</button>
            </>
          ) : (
            <>
              <h1 className={style.card__heading} >{items.title}</h1>
              <p className={style.card__paragraph}>{items.body}</p>
            </>
          )}
          <button
            className={style.card__btn}
            onClick={(e) => setEditText(!editText)}
          >
            редактировать
          </button>
        </div>
      )}
    </div>
  );
};

по задумке по нажатию на кнопку должны появится инпуты с помощью которых можно будет поменять заголовок текста и сам текст но я не понимаю как это нужно реализовать потому что изменения должны отправлятся с помощью put запроса а опыта в этом у меня мало

Answer 1

Как один из вариантов. Исходил из того, что к вам от сервиса приходит объект следующего формата { title: '', body: ''}

Более подробно изучить, как и с какими параметрами можно передавать данные и получать их через плагин axios на официальной странице.

export const CurrentCard = () => {
  const { id } = useParams();
  const [items, setItems] = useState(null); // { title: '', body: ''}
  const [editText, setEditText] = useState(false);

  const client = Axios.create({
    baseURL: "https://jsonplaceholder.typicode.com/posts",
  });
  useEffect(() => {
    client.get(`/${id}`).then((response) => {
      setItems(response.data);
    });
  }, [id]); // Убрана зависимость items
  
  // Функция берет обновленные данные и отправляет их 
  const  handleChange = () => {
    axios.put('https://example.com/setData/', items)
      .then(response => {
        // Далее что то делаем, если все хорошо
      })
      .catch(error => {
        // Если что то сломалось
      });
  }
  // Функция меняет значение для выбранного элемента и сохраняет их.
  const change = (e) => {
    const changeItems = items;
    changeItems[e.currentTarget.id] = e.currentTarget.value;
    setItems({ ...changeItems });
  }

  return (
    <div className={style.card}>
      {items && (
        <div className={style.card__box}>
          {editText ? (
            <>
              {" "}
              <div className={style.redact__form}>
                <input type='text' id={'name'} value={items.title} onChange={change} />
                <textarea id={'body'} value={items.body} onChange={change} />
              </div>
              {" "}
              <button onClick={handleChange}> save</button>
            </>
          ) : (
            <>
              <h1 className={style.card__heading}>{items.title}</h1>
              <p className={style.card__paragraph}>{items.body}</p>
            </>
          )}
          <button
            className={style.card__btn}
            onClick={(e) => setEditText(!editText)}
          >
            редактировать
          </button>
        </div>
      )}
    </div>
  );
};

БЛОГ НА HUSL

как поменять текст в тэге react с помощью put запроса через axios?

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