Проблема с рендерингом React onKeyPress

#javascript #reactjs #typescript #jsx #tsx

Вопрос:

Я пытаюсь создать компонент, который действует как своего рода маркированный список. В неупорядоченном элементе списка содержится поле ввода (действующее как первая маркерная точка, которая по умолчанию всегда будет там). Поле имеет onKeyPress функцию, которая проверяет, нажимает ли пользователь клавишу return (или Enter), чтобы создать новую маркерную точку. Когда это происходит, функция добавляет другое идентичное поле ввода в bulletList массив, который затем отображается на странице с помощью функции .map() JS.

Проблема, с которой я сталкиваюсь, заключается в следующем: в поле ввода по умолчанию (первом), которое всегда есть, функция ввода работает отлично. Пользователь может нажать enter, и под ним создается новое поле ввода. Проблема возникает здесь: во втором (вновь созданном) поле ввода частично работает функция ввода. Он регистрирует на консоли то, что ему нужно для регистрации в качестве теста (указывая, что он запускается), но не отображает новое поле ввода ниже. В чем здесь может быть проблема? Спасибо!

Исходное поле ввода:

 <input onKeyPress={(e) => handleAdd(e)} autoFocus />

Функция суммирования:

 const handleAdd = (e) => {
        if (e.key == "Enter") {
            setBulletList([...bulletList, (<input onKeyPress={(e) => handleAdd(e)} autoFocus />)]);
            console.log("Worked?");
            console.log(bulletList);
        }
        
    };

1. Вы пытаетесь вставить сам ввод в состояние? 🙂

2. @OrAssayag Я пытаюсь добавить новое поле ввода в массив (bulletList), которое отображается ниже исходного компонента. Он работает в первый раз, на исходном, но не в созданном сразу после.

3. @OrAssayag я добавляю его в массив. Это состояние. 🙂 const [bulletList, setBulletList] = useState([]);

4. Массив имеет тип ReactNode, который содержит элементы JSX. const [bulletList, setBulletList] = useState<Array<React.ReactNode>>([]); . И это действительно работает, потому что он добавляет его один раз, но затем больше не делает.

5. как упоминал @OrAssayag, вам лучше не хранить элементы JSX в вашем состоянии. Вы должны видеть, каковы состояния вашего компонента, а не то, что он должен отображать. Вы можете, например, сохранить количество ваших входных данных или объектов, содержащих их атрибуты, … . Это зависит от того, что вы хотите сделать. Но не храните JSX, это, вероятно, плохая идея.

Ответ №1:

У вас нет ничего, что отличало бы первое от второго, поэтому React запутывается, когда их больше одного. React часто предупреждает вас, чтобы убедиться, что у каждого элемента есть свои уникальные ключи. Если у них нет уникальных ключей / идентификаторов, React не обновит виртуальный dom. Виртуальный dom — это то, что React использует для идентификации внесенных изменений.

Дайте каждому свой собственный класс, и это должно сработать.

1. Под классом вы подразумеваете создание отдельного компонента React для каждого (извлечь его)?

2. Я имею в виду html-класс <input className=»class1″>

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

Ответ №2:

Вы должны добавить входное значение, а не входной HTML-тег, например:

 const handleAdd = (e) => {
        if (e.key == "Enter") {
            setBulletList([...bulletList, e.target.value]);
            console.log("Worked?");
            console.log(bulletList);
        }
        
    };