Как вы можете сказать responseJs, что каждый флажок уникален, поэтому, когда я изменяю проверенный атрибут для одного блока, он не помечает все остальные поля?

Question

import React, {useState} from 'react';




const Checkbox = props => (
    <input type="checkbox" {...props} />
  )

const GenerateProgramClasses = (props) => {

const [checkBoxes, setCheckBoxes] = useState({default:false})
const listOfClasses =
        Object.keys(props.classesDB).map(
            class =>
            <li key={props.areaOfStudy+'_'+ class}>
                <Checkbox
                    checked = //{ some function that picks true or false, and I got a lot of errors/warnings }
                    onChange = //{
                        (e)=> // Calls some handler function that would take e.target.checked 
                              // and store it with a key into a useState({default:false}) object, 
                              // the default is there because when the page gets rendered for the
                              // first time all checkboxes should be unchecked.
                    }    
                    onClick={(e)=> props.sumCredits(e, props.classesDB[class])}
                />
                {props.areaOfStudy + ": " + class + " "}
                Credits: {props.classesDB[class]}

            </li>
                )

return(
    <div>
        <p>Step: {props.pageNum}</p>
        <h2>Program Core: {props.areaOfStudy}</h2>
        <h3>Total Credits: {props.credit}</h3>
            <form>
            <ol>
                {listOfClasses}
            </ol>
            </form>
        <button onClick={() => props.previousPage()}>previous</button>
        <button onClick={() => props.nextPage()}>next</button>
    </div>
)
}

export default GenerateProgramClasses

Выше приведен мой код, который будет генерировать страницу, содержащую список флажков для школьных курсов и соответствующих кредитов. Когда я поставлю галочку, будет запущен флажок sumCredits, а затем добавлю / вычту кредиты из общей переменной кредита. Наконец, когда я нажимаю на свою следующую / предыдущую кнопку, состояние для pageNum изменится, потому что у меня есть оператор switch из App.js, что приведет к повторной визуализации правильной страницы с использованием компонента GenerateProgramClasses.

Все отлично работает, когда я нажимаю на свои кнопки вперед. Однако, поскольку я перерисовываю страницу каждый раз, когда нажимаю на кнопку, вся моя предыдущая история для этих флажков исчезла. Я попытался исправить это, создав новое состояние, которое будет отслеживать, какой флажок был нажат, а затем использовать эту пару ключ-значение, чтобы перестроить список флажков. Это не сработало вообще, по какой-то причине реакция проверила бы все поля true или false одновременно для всех блоков. Это случилось со мной раньше, когда я не добавлял значения уникальных ключей в свои элементы списка. Я не уверен, если это действительно то, что вызывает это.

Итак, как вы говорите реагировать на то, что когда флажок установлен, запомните его состояние, чтобы в следующий раз при повторном рендеринге страницы использовать это предыдущее состояние в качестве аргументов для повторного построения списка флажков? Я исправил это, иначе мой общий счетчик кредитов был бы испорчен. Спасибо.

Answer 1

Вы можете использовать параметр индекса функции карты для генерации уникальных значений и использовать этот индекс в качестве атрибута id флажка

myarray.map((currElement, index) => {

  console.log("The current iteration is: " + index);
  //you can also modify index as per your requirement 

  <input id={index} type="checkbox" {...props} />
})