Как я могу использовать событие изменения дескриптора в текстовом поле для обновления состояния массива реакции? - PullRequest
Новая
       61

Как я могу использовать событие изменения дескриптора в текстовом поле для обновления состояния массива реакции?

0 голосов
/ 20 июня 2020

Ниже приведен код, в котором при предварительной загрузке все элементы связываются внутри текстового поля, и с помощью того же текстового поля я хочу обновить значение состояния в реакции. состояние элементов обновляется, но выдает ошибку, как только завершается выполнение метода handlechange. items.map не является функцией. Как я могу использовать функцию изменения дескриптора в текстовом поле для обновления состояния массива? 

import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import {getItems} from "./helper/adminapicall";

const ManageItems = () => {
  const [items, setItems] = useState([]);

  const preload = () => {
    getItems().then((data) => {
      if (data.error) {
        console.log(data.error);
      } else {
        setItems(data);
      }
    });
  };
  
  const handleChange = (index, name) => (event) => {
    setItems({
      ...items[index].name,
      error: false,
      [name]: event.target.value,
    });

    console.log(items);
  };

  useEffect(() => {
    preload();
  }, []);

  return (
    <Base title="Welcome admin" description="Manage items here">
      <h2 className="mb-4">All items:</h2>
      <Link className="btn btn-info" to={`/admin/dashboard`}>
        <span className="">Admin Home</span>
      </Link>
      <div className="row">
        <div className="col-12">
          <h2 className="text-center text-white my-3">Total 3 
           products</h2>
          {items &&
            items.map((item, index) => {
              return (
                <div className="row form-group" key={index}>
                  <div className="col-4">
                    <input
                      type="text"
                      className="form-control"
                      value={item.name}
                    onChange={handleChange(index, "name")}
                    />
                  </div>                
                </div>
              );
            })}
        </div>
      </div>
    </Base>
  );``
};

export default ManageItems;

1 Ответ

1 голос
/ 20 июня 2020

onchange={e=> setItems(e.target.value)} Надеюсь, это то, что вы имеете в виду из того, что задали в своем вопросе.

...