Можно ли в React использовать хуки для заполнения отдельных входных данных, сгенерированных из array.map ()?

Question

Рассмотрим следующее приложение. Как бы я мог go хранить входные данные, связанные с каждым идентификатором элемента во «input», таким образом, чтобы после того, как я нажал кнопку, я мог отправить информацию о входе, связанном с идентификатором элемента кнопки, на которой я нажал .

Можно ли хранить данные в массиве, так что у меня есть [{id: 123, inputvalue: "zyx"}, {id: ..., inputvalue: ...}, { id: et c., inputvalue: et c.}]?

Как мне go получить доступ к таким данным, которые будут отправлены с помощью кнопки и будут использоваться, отображаемые в приложении в третьем столбце?

   import React, { useEffect, useState, Fragment } from "react";

   export default function App () {
       const [input, setInput] = useState([]);
       const [idData, setIdData] = useState([]);

       useEffect(
         //gets id data and setIdData(response.data);
       )

       handleButton () {
           try{
               //sends data for single item
           } catch (e)) {
               alert(e)
           }

       }

       return(
           <Fragment>
               <table>
                    <tableheader>
                        <tablerow>
                            <tableheadercell>
                                 ID
                            </tableheadercell>
                            <tableheadercell>
                                 Input
                            </tableheadercell>
                            <tableheadercell>
                                 ID and Input
                            </tableheadercell>
                            <tableheadercell>

                            </tableheadercell>
                        <tablerow>
                    </tableheader>
                    <tablebody>
                        {idData.map(item => (
                            <tablerow key={item.id}>
                                <tablecell>
                                     ID
                                </tablecell>
                                <tablecell>
                                     <input... onChange(e => setInput({
                                         id: item.id, inputvalue: e.target.value}))>
                                </tablecell>
                                <tablecell>
                                     {ID and input appearing together}
                                </tablecell>
                                <tablecell>
                                     <button... onClick(() => handleButton())>
                                </tablecell>
                            <tablerow>
                        ))}
                    </tablebody>
               </table>
           </Fragment>
       );
   }

Большое спасибо заранее!

Answer 1

• Получите ваши данные в useEffect и сохраните их в состоянии setIdData.
• Сопоставьте их и динамически отобразите строки таблицы, например: <td>{item.id}</td>
• Поддерживайте состояние для input и в onChange используйте обратный вызов set state для динамического обновления объекта с ключом ввода как id с введенным пользователем значением
• Создайте handleButton для кнопки и передайте item. Вы можете легко получить input value из состояния.

Ваш код был отредактирован. См. Рабочую демонстрацию здесь

Фрагмент кода:

export default function App() {
  const [input, setInput] = useState({});
  const [idData, setIdData] = useState([]);

  useEffect(() => {
    // make api call and then set the state
    setIdData([{ id: 123, inputvalue: "xyz" }, { id: 234, inputvalue: "abc" }]);
  }, []);

  const handleInputChange = (e, id) => {
    const val = e.target.value;
    setInput(prev => ({ ...prev, [id]: val }));
  };

  const handleButton = item => {
    console.log(item, input[item.id]);
  };

  return (
    <Fragment>
      <table>
        <th>
          <tr>
            <td>ID</td>
            <td>Input</td>
            <td>ID and Input</td>
            <td />
          </tr>
        </th>
        <tbody>
          {idData.map(item => (
            <tr key={item.id}>
              <td>{item.id}</td>
              <td>
                <input
                  onChange={e => handleInputChange(e, item.id)}
                  value={input[item.id]}
                />
              </td>
              <td>
                {/* {ID and input appearing together} */}
                {item.id + item.inputvalue}
              </td>
              <td>
                <button onClick={() => handleButton(item)}>
                  click button {item.id}
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </Fragment>
  );
}

Answer 2

Я создал функцию, которая обрабатывает эту функциональность. Надеюсь, это решит вашу проблему.

import React, { useEffect, useState, Fragment } from "react";

export default function DynamicId() {
    const [input, setInput] = useState([]);
    const [idData, setIdData] = useState([
        { id: 1, inputvalue: "Testing" }, { id: 2, inputvalue: "Working" }
    ]);

    function handleButton(item) {
        try {
            console.log(item);
            //sends data for single item
        } catch (e) {
            alert(e);
        }

    }
    function setObject(e, id) {

        let idIndex = input.findIndex((inp) => inp.id === id);
        let newInput = input.slice();
        if (idIndex === -1) {
            let obj = {
                id: id,
                inputvalue: e.target.value
            };
            newInput.push(obj);
        } else {
            newInput[idIndex].inputvalue = e.target.value;
        }
        setInput(newInput);
    }
    return (
        <table>
            <tableheader>
                <tablerow>
                    <tableheadercell>
                        ID
                    </tableheadercell>
                    <tableheadercell>
                        Input
                    </tableheadercell>
                    <tableheadercell>
                        ID and Input
                    </tableheadercell>
                </tablerow>
            </tableheader>
            <tablebody>
                {idData.map(item => (
                    <tablerow key={item.id}>
                        <tablecell>
                            ID
                                </tablecell>
                        <tablecell>
                            <input onChange={(e) => setObject(e, item.id)} />
                        </tablecell>
                        <tablecell>
                            {
                                item.id
                            }
                            with
                            {
                                item.inputvalue
                            }
                        </tablecell>
                        <tablecell>
                            <button onClick={() => handleButton(item)}>Check Value</button>
                        </tablecell>
                    </tablerow>
                ))}
            </tablebody>
        </table>
    );
}