Javascript 如何在react native中添加动态输入？

我有3个输入和加号按钮，当按下它时，我想再加3个输入，这样他的状态

国家是这样的

state={
 toolsUsed: [
      {
        id: (Math.random() * 150).toString(),
        name: '',
        price: '',
        count: '',
      },
     {..},
    ],
}

在前3个输入组件中，我希望在添加更改值文本时使用此值设置状态

但是我试过了，但是在改变了文本之后，我陷入了一种状态

toolsUsed => [" ","text"]

我想要达到的目标

toolsUsed => [{name:'text",count:'..',price:'....',id:'..'},{...}]

用户界面

这是我的密码

renderToolsUsed = () => {
   const {toolsUsed} = this.state;
   const prom = toolsUsed.map(({name, id, price, count}, i) => {
      return (
        <View>
          <View style={styles.toolsItem}>
            <TextInput
              onChangeText={name =>
                this.setState(
                  prevState => {
                    return {
                      ...prevState,
                      toolsUsed: [prevState.toolsUsed[i].name, name],
                    };
                  },
                  () => console.log(this.state.toolsUsed),
                )
              }
              value={name}
              key={id}
            />
          </View>


          <View style={styles.toolsItem}>
            <TextInput
              onChangeText={count => this.setState({})}
              value={count}
              key={id}
            />
          </View>

          <View style={styles.toolsItem}>
            <TextInput
              onChangeText={price => this.setState({})}
              value={price}
              key={id}
            />
          </View>
          <TouchableOpacity onPress={() =>
          this.setState(prevState => {
            return {
              ...prevState,
              toolsUsed: prevState.toolsUsed.length + 1,
            };
          })
        }> **// heres i got error "toolsUsed.map not a function**
            <Text>+</Text>
          </TouchableOpacity>
        </View>
      );
    });

     return prom;
   }

编辑~2

我添加了一个减号按钮来删除tools数组中的最后一个对象， 这里有两种方法来处理它，但我有一些奇怪的第一种方法工作得很好，我不知道为什么！但是当我评论第一个var newInput时，它是不删除最后一项的

onPress={() => {
        // first way
         let newInput = this.state.toolsUsed.pop();
         this.setState(prevState => ({
              toolsUsed: prevState.toolsUsed.filter(
                 tool => tool.id !== id,
               ),
         }));
       // Second
         let rowDeleted = [...this.state.toolsUsed];
         rowDeleted.splice(-1, 1);
         this.setState({toolsUsed: rowDeleted});
 }}

---

您必须在状态更新中执行类似的操作。这并不漂亮，但你对州的编辑相当深入

这将编辑您所在州的toolsUsed属性中第i个元素的名称：

onChangeText = {name =>
    this.setState(
        prevState => {
            return {
                toolsUsed: [
                    ...prevState.toolsUsed.slice(0, i),
                    {
                        ...prevState.toolsUsed[i],
                        name
                    },
                    ...prevState.toolsUsed.slice(i + 1)
                ],
            };
        },
        () => console.log(this.state.toolsUsed),
    )
}

请注意，您的TouchableOpacity onPress也会破坏您的状态。它用一个数字替换数组

您编辑的函数仍然没有向数组中添加正确的新条目。它应该添加具有相同结构的对象。它应该是这样的：

onPress={() => {
    let newInput = {id: generateId(), name: '', price: '', count: '',};
    this.setState(prevState => ({
        toolsUsed: [...prevState.toolsUsed, newInput],
    }));
}}

---

正如您在评论中提到的，缺少的最后一个修复是向映射数组中的每个视图添加稳定键，如下所示：…

使用随机生成器生成唯一id不是一个好主意。@Kobe-hmm，为什么？为什么这是一个好主意？如果你依赖于一个id，那么你就埋下了一个bug，因为它不会经常发生，但它会发生，也就是说，生成相同的id。那么，我如何从0开始生成idBy并逐步向上？这是一种常见的方法感谢你的回复，感谢你的设置，谢谢你的工作，但是当我只键入一个单词的第一个字符时，键盘就消失了，所以我给了我的代码更多的上下文。如果用这个替换onChangeText，在编辑名称时仍然会丢失数组？我认为问题是我在渲染中放置了贴图，所以每次重新渲染时，我都会丢失它。区别在于，您没有向数组中添加新对象，而是添加了一个数字，这将导致您在执行此类操作时出现问题。state.toolsUsed[this.state.toolsUsed.length-1].name.对于generateId问题，请创建另一个stackoverflow问题。这个问题已经变得相当大，超出了范围。

onChangeText = {name =>
    this.setState(
        prevState => {
            return {
                toolsUsed: [
                    ...prevState.toolsUsed.slice(0, i),
                    {
                        ...prevState.toolsUsed[i],
                        name
                    },
                    ...prevState.toolsUsed.slice(i + 1)
                ],
            };
        },
        () => console.log(this.state.toolsUsed),
    )
}

onPress={() => {
    let newInput = {id: generateId(), name: '', price: '', count: '',};
    this.setState(prevState => ({
        toolsUsed: [...prevState.toolsUsed, newInput],
    }));
}}