Нужно ли устанавливать атрибут значения в TextInput?

Question

У меня были проблемы с чем-то вроде этого (в частности, в атрибуте значения TextInput):

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

  const handleNewItem = () => {
    setItems([...items, '']);
  };

  const handleText = (text, index) => {
    items[index] = text;
    setItems(items);
    // this was populating correctly in console.log
    // as I type, it will come out like ["somedata", "blah"....] etc...
  };

  return (
    <>
      <View style={{marginTop: 20}}>
        <View>
          {items.map((items, index) => {
            return (
              <View key={index}>
                <Text>{index + 1}</Text>

                // issue with setting value attribute
                // Text would disappear as I type in the input field
                <TextInput value={items} onChangeText={text => handleText(text, index)} />

              </View>
            );
          })}
          <TouchableOpacity onPress={e => handleNewItem(e)}>
            <Text>Add item</Text>
          </TouchableOpacity>
        </View>
      </View>
    </>
  );
};

Мне удалось вывести из консоли правильные значения для items, но на моем В мобильном симуляторе, когда я что-то печатаю, текст исчезает.

Когда я удалил value={items} из компонента TextInput, я могу печатать в поле ввода симулятора, без исчезновения текста. Я всегда думал, что нам нужно значение от reactjs. Разве нам это не нужно? или я что-то не так делаю?

Answer 1

Я бы посоветовал не обновлять ваше состояние напрямую. Вместо этого используйте новый объект для обновления состояния как

  const handleText = (text, index) => {
    let newItems = [...items];
    newItems[index] = text;
    setItems(newItems);
  };

Answer 2

• Вместо

 const handleText = (text, index) => {
    items[index] = text;
    setItems(items);
    // this was populating correctly in console.log
    // as I type, it will come out like ["somedata", "blah"....] etc...
  };

• Вы можете попробовать:

 const handleText = (text, index) => {
    setItems({...items, index: text});
  };

Эта статья может помочь вам ясно понять: https://daveceddia.com/usestate-hook-examples/#: ~:. текст = Значение% 20useState% 20hook% 20lets% 20you% 20add% 20state% 20to% 20function% 20components и текст = В% 20classes% 2C% 20the% 20state% 20was, A% 20string% 2C% 20whatever% 20you% 20need .