根据数组的数量显示数据

时间:2018-01-08 00:18:57

标签: javascript arrays reactjs user-interface frontend

我有数据推送到一个名为value的状态。我想根据数组的数量显示它们。我正在尝试启动而不是工作。

$ printf '%(%F %T)T\n' $(printf '%s/1000\n' $(<file10) |bc)
2018-01-08 00:45:17
2018-01-08 00:45:23
2018-01-08 00:45:39

我将jumlah,nama_barang和harga推入价值[]这样的

constructor(props) {
    super(props)
    this.state = {
        json: [],
        search: '',
        value: [],
        jumlah : "",
        nama_barang : "Bolu kuwuk",
        harga : 10000
    }

}

并像这样显示它们

 handleSubmit(e){
    e.preventDefault();
    alert("Data Telah diinputkan!");
    this.state.value.push(
        this.state.jumlah,
        this.state.nama_barang,
        this.state.harga
    )
    this.setState(
         this.state
    )
    console.log(this.state.value)

}

当我写{v}但它打印整个数组时它起作用。我只想按数组显示它

1 个答案:

答案 0 :(得分:0)

当您push进入数组时,您向该数组添加了3个新元素,而不是包含jumlahnama_barangharga的一个对象。

你应该做的是:

this.state.value.push({
   jumlah: this.state.jumlah,
   nama_barang: this.state.nama_barang,
   harga: this.state.harga, 
});

这将使其按预期工作,但您正在改变状态并将setState设置为this.state - 这两件事情都违反了最佳做法。

请改为尝试:

this.setState((prevState) => {
    return {
        value: prevState.value.concat([{
            jumlah: this.state.jumlah,
            nama_barang: this.state.nama_barang,
            harga: this.state.harga, 
        }])
    }
});

在上面的代码中,我们没有改变现有的状态对象,我们在setState中使用更新程序回调,其中包含对我们之前状态的引用(规则是我们每当我们的新状态取决于我们之前的状态时,应该使用updater语法)