在 React 中为每个添加元素增加 ID

Question

我遇到了一个问题，即我无法为行中每次添加的元素增加状态元素的 ID。我得到的是每次添加元素都会重复相同的数字，我需要像 ID 这样的东西应该是 1 到 n 个添加数。 在文本框中，我没有输入 ID，我只输入 LText（名称）。 通常，ID 应该为每次添加的元素生成。 我试过的是..

    export default class EPIM091 extends cntrl.WITBase {
    constructor(props) {
        super(props);
        const witState = this.state;
        if (Object.keys(witState).length == 0) {
            witState.model = { LID: 1, LText: '', SOrder: '', Inventoried: false, Location:[] }; //Here i need to store all other state values to the Location Array
}
}
 clickAction = (e) => {
if (e.id == 'btn_add') {
            //var i = 1;
            const { model } = this.state;
            if (model.LText != null) {
                if ((model.Location || []).length == 0) {
                    model.Location = [];
                }
                // this.setState(prevState => { return { LID: e.id == 'btn_add' ? prevState.LID + 1 : prevState.LID - 1 } }); //This does not worked
                model.Location.push({ "LID": model.LID.toString(), "LText": model.LText, "SOrder": model.SOrder, "Inventoried": model.Inventoried.toString() });
                this.setState({
                    model: model,
                    LID: model.LID + 1 //This also not worked
                });
            }
        }
    };
       render(){
// Due to confusion of code, i did not add the textboxes codes
<cntrl.WITButton id="btn_add" onWitClick={this.clickAction} />
}

我需要一些东西，比如当我添加时，我应该将唯一 LID 从 1 获取到添加的元素数。我得到的是相同的 ID，即 1。谢谢

Answer 1

这里有很多问题：

1) 您正在尝试修改您声明为常量的变量：

const witState = this.state;
        if (Object.keys(witState).length == 0) {
            witState.model = { LID: 1, LText: '', SOrder: '', Inventoried: false, Location:[] };

2) 您正在尝试访问状态变量，但您从未定义它：

const { model } = this.state;

3) 你尝试修改它，即使它被声明为常量：

if (model.LText != null) {
                if ((model.Location || []).length == 0) {
                    model.Location = [];
                }
                // this.setState(prevState => { return { LID: e.id == 'btn_add' ? prevState.LID + 1 : prevState.LID - 1 } }); //This does not worked
                model.Location.push({ "LID": model.LID.toString(), "LText": model.LText, "SOrder": model.SOrder, "Inventoried": model.Inventoried.toString() });
                this.setState({
                    model: model,
                    LID: model.LID + 1 //This also not worked
                });
            }

除非有很多代码您没有向我们展示，否则您的控制台中肯定有很多错误。观看。

-[编辑]-：

问题在于，除非我拥有完整的代码，否则我无法真正帮助您，因为它是没有意义的。如果你只是想增加你的 LID 状态变量，这里有一个工作示例：

constructor(props) {
   super(props);
   this.state={LID:1}
}
test=(e)=>{
    let {LID} = this.state;
    this.setState({LID:LID+1})
    console.log(this.state.LID);
 }
 render(){
     return(
         <button onClick={this.test}> Test</button>
     )
 }