根據數組數顯示數據

Question

我有數據推送到名為值的狀態。 我想根據數組數顯示它們。 我正在嘗試啟動但不起作用。

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

}

我像這樣將jumlah，nama_barang和harga推入價值[]

 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)

}

並像這樣顯示它們

{this.state.value.map((v, i) => {
      return <div key={i}>
            <h1>{v.jumlah}</h1>
            <h1>{v.nama_barang}</h1>
            <h1>{v.harga}</h1>

      </div>

    })}

當我寫{v}時它起作用，但是它打印整個數組。 我只想按數組數顯示它

Answer 1

當你push到你的陣列中，要添加3個新的元素數組，而不是包含一個對象jumlah ， nama_barang和harga 。

您應該做的是：

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

這將使它按預期工作，但是您正在對狀態進行突變並將setState設置為this.state ，這兩項與最佳做法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回調，該回調包含對我們之前狀態的引用（規則是，只要我們的新狀態取決於我們之前的狀態，就應該使用updater語法）