从用户输入的文本中在TextInput中设置值吗？

Question

我遇到了类似这样的问题（特别是在TextInput value属性中：]

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的正确值，但是在我的移动模拟器上，当我键入内容时，文本消失了。

当我从TextInput组件中删除value={items}时，我可以在模拟器输入字段中键入内容，而文本不会消失。我一直以为我们需要reactjs的价值。我们不需要吗？还是我做错了？

Answer 1

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

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

  const handleText = index => e => {
    console.log(e);
    items[index] = e;
    setItems(items);
  };

  return (
    <>
      <View style={{ marginTop: 20 }}>
        <View>
          {items.map((items, index) => {
            return (
              <View key={index}>
                <Text>{index + 1}</Text>
                <TextInput
                  value={items[index]}
                  onChangeText={handleText(index)}
                />
              </View>
            );
          })}
          <TouchableOpacity onPress={e => handleNewItem(e)}>
            <Text>Add item</Text>
          </TouchableOpacity>
        </View>
      </View>
    </>
  );
};