Question

我是React-native的初学者，我正在制作一个可编辑的表单，如果用户单击该项目，它将重定向到其先前值将存在的表单，他可以对其进行编辑并保存。

这是我的状态

 constructor(props) {
        super(props);
        this.state = {
            ProjectId:'',
            ProjectName:'',
            Items:[{
               Item_Description:'',
               Specification:"",
               QtyReq:'',
               Unit:"",
               ItemId:"",
               QtyUnit:'',
               searchedForm:[]
            }],
        };
      }

从api获取所有值并设置状态

 componentDidMount = () => {
        const { indent } = this.props;
        this.props.getStockItems()
        this.props.getSites()

        this.setState({
          ProjectId:indent.ProjectId,
          ProjectName:indent.ProjectName,
        })

//maping through Items because i have array of item you can see in state 

        indent.Items.map((item,newindex) => {
            this.setState({
                Items:[{
                    Item_Description:item.Item,
                    Specification:item.Specification,
                    QtyReq:item.QtyReq,
                    Unit:item.Unit,
                    ItemId:item.ItemId,
                    QtyUnit:item.QtyUnit,
                    searchedForm:[]
                 }],
            })
        })
      };

onChnage文字

 onItemDescriptionChange = (text, index) => {
        const { stocks } = this.props.indents;

        var searchedForm = stocks.filter(function(stock) {
          return stock.Item.toLowerCase().indexOf(text.toLowerCase()) > -1;
        });

        const existingItems = this.state.Items.map(fields => ({...fields}))
        let targetField = {...existingItems[index]}
        targetField.Item_Description = text
        targetField.searchedForm = searchedForm
        existingItems[index] = targetField


        this.setState({ Items: existingItems})

      }

      onQuantityChange = (text, index) => {
        const existingItems = this.state.Items.map(fields => ({...fields}))
        let targetField = {...existingItems[index]}
        targetField.QtyReq = text
        existingItems[index] = targetField

        this.setState({Items: existingItems})
      }

      onSpecificationChange = (text, index) => {
        const existingItems = this.state.Items.map(fields => ({...fields}))
        let targetField = {...existingItems[index]}
        targetField.Specification = text
        existingItems[index] = targetField

        debugger
        this.setState({Items: existingItems})
      }



      itemSelect = (item,index) => {
        const existingItems = this.state.Items.map(fields => ({...fields}))
        let targetField = {...existingItems[index]}
        targetField.Item_Description = item.Item
        targetField.Unit = item.Unit
        targetField.QtyUnit = item.UnitId
        targetField.ItemId = item.ItemId
        targetField.searchedForm = []
        existingItems[index] = targetField
        this.setState({ Items:existingItems})

        console.log("hello" + " " + item.Item + " " + index);

      }

      onsubmit = () => {
        const data = {
            ProjectId:this.state.ProjectId,
            Items:this.state.Items
        }

      console.log(data)

  }

渲染

render() {
        const { indent } = this.props;

        const newItems =   (
                <View >
                    {
                    this.state.Items.map((field, parentindex) => {
                      return(
                        <Card key={parentindex} >

                          <Block padding={[0, theme.sizes.base]} margin={[theme.sizes.base,0]}>
                            <Block>
                              <Input 
                                label="Item Description"
                                style={[styles.input]}
                                defaultValue={field.Item_Description}   
                                onChangeText={(text) => this.onItemDescriptionChange(text, parentindex)}
                              /> 
                            <Block padding={[0, theme.sizes.base]} >
                                <FlatList
                                  data={field.searchedForm}
                                  keyExtractor={(ItemId,index) => index.toString()}
                                  renderItem={({item,index})=>(
                                    <ListItem
                                      key={index}
                                    >
                                      <TouchableOpacity  onPress={()=>this.itemSelect(item,parentindex)}>
                                        <Text bold>{item.Item}</Text>
                                      </TouchableOpacity>
                                    </ListItem>

                                  )} 
                                />
                              </Block>
                            </Block>
                            <Block margin={[theme.sizes.base,0]}>
                              <Input 
                                label="Specification"
                                style={[styles.input]}
                                defaultValue={field.Specification} 
                                onChangeText={(text)=> this.onSpecificationChange(text, parentindex)}
                              /> 
                            </Block>

                            <Block style={{flexDirection:"row"}}>
                              <Block margin={[theme.sizes.base,0]}>
                                <Input 
                                  label="Quantity"
                                  style={[styles.input]}
                                  defaultValue={`${field.QtyReq}`}   
                                  keyboardType="numeric"  
                                  onChangeText={(text)=> this.onQuantityChange(text, parentindex)}
                                />
                              </Block>      
                              <Block margin={[theme.sizes.base,0]}>
                                <Input 
                                  label="Unit"
                                  style={[styles.input]}
                                  defaultValue={`${field.Unit}`} 
                                  editable={false} 
                                  selectTextOnFocus={false}
                                /> 
                              </Block>

                            </Block>
                          </Block>
                        </Card>
                      )
                    })
                  } 
                </View>
            )
        // })
        return (
            <KeyboardAvoidingView style={{flex:1, justifyContent:"center"}} behavior="padding">
                <Card>
                    <Picker
                      style={{flex:1}}
                      selectedValue={this.state.ProjectId}   
                      onValueChange={(ProjectId)=>this.setState({ProjectId:ProjectId})} 
                    >
                      <Picker.Item key={indent.IndentId} value={this.state.ProjectId} label={this.state.ProjectName}/>
                    </Picker>
                  </Card>
                <Text> hello :- {indent.IndentId} </Text>
                <ScrollView>
                {newItems}
                <Block  middle flex={0.5} margin={[0, theme.sizes.padding * 2]}>
                    <Button
                      style={styles.submitButton}
                      onPress={this.onsubmit}
                    >
                      <Text white bold center>Submit</Text>
                    </Button>
                  </Block>
                </ScrollView>

            </KeyboardAvoidingView>
        )
    }
}


EditIndent.propTypes = {
    getStockItems: PropTypes.func.isRequired,
    getSites: PropTypes.func.isRequired,
    indent: PropTypes.object.isRequired,
  };

  const mapStateToProps = state => ({
    site: state.site,
    errors:state.errors,
    indents: state.indent,
  });

  export default connect(
    mapStateToProps, 
    { 
        getStockItems,
        getSites,
        postIndent
    }
  )(EditIndent);

现在的问题是我有3个物品，但是只显示1个物品。 Items是我拥有3个对象的Items中的一个对象数组，但仅显示最后一个对象

这是我从api获取的数据。因此，对于3个项目，将有3个表格

[
    {
        "IndentDate": "2019-08-17T18:17:56.17",
        "ProjectName": "Infosys Panchsil Pune-(Po No-1300043503)",
        "Items": [
            {
                "Item": "2 Hrs Fire Rated Interlayred Fire Glass Contraflame Door Lite -CFDL - 11 MM of Saint Gobain Make",
                "Unit": "Sqmtr",
                "IndentId": 5369,
                "ItemId": 1115,
                "Specification": "qwerty",
                "QtyReq": 56,
                "QtyUnit": 22,
            },
            {
                "Item": "13Amp Adapter",
                "Unit": "Nos",
                "IndentId": 5369,
                "ItemId": 1738,
                "Specification": "rtyu",
                "QtyReq": 25,
                "QtyUnit": 11
            },
            {
                "Item": "1\"  3M Tape - Mirror Mounting (8.23 Meter)",
                "Unit": "Roll",
                "IndentId": 5369,
                "ItemId": 29,
                "Specification": "uuyttr",
                "QtyReq": 24,
                "QtyUnit": 16
            }
        ],
        "IndentId": 5369,
        "ProjectId": 257,
    }
]

我想要根据项目创建表单，但我只能获取最后一个表单

This is what I'm Getting

Answer 1

更改

 indent.Items.map((item,newindex) => {
        this.setState({
            Items:[{
                Item_Description:item.Item,
                Specification:item.Specification,
                QtyReq:item.QtyReq,
                Unit:item.Unit,
                ItemId:item.ItemId,
                QtyUnit:item.QtyUnit,
                searchedForm:[]
             }],
        })
    })

收件人

    const ItemsArray =[];
     indent.Items.map((item,newindex) => {
                ItemsArray.push({
                        Item_Description:item.Item,
                        Specification:item.Specification,
                        QtyReq:item.QtyReq,
                        Unit:item.Unit,
                        ItemId:item.ItemId,
                        QtyUnit:item.QtyUnit,
                        searchedForm:[]
                     });
            })
  this.setState({ Items:ItemsArray });

每次调用 this.setState 时，它都会将以前的值替换为当前值，因此您只会得到最后一个对象。

使表单可编辑

1 个答案: