陣列長度為零但具有可訪問元素

我希望能夠在狀態中存盤某種形式的動態結構。每個輸入元素呼叫相同的函式“handleFormInput”。在“name”中存盤輸入名稱。在“價值”中的實際價值。

每次更改后，這些值都存盤在狀態中。

如果用戶現在單擊表單按鈕，則呼叫函式“handleForm”。該函式檢查狀態并做出相應的反應。

我的問題：我檢查陣列的長度，它總是 0。

但是，如果我通過 Console.log 輸出所有內容，我也會正確地看到陣列中的元素。我沒有考慮到什么？

在每次輸入更改時呼叫

    handleFormInput(event){
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;

        this.state.saveFormData[name] = value;
        

        this.setState({
            saveFormData : this.state.saveFormData
        }, () => {console.log(this.state.saveFormData)});
    }

“提交”時呼叫

    handleForm(){
        var l = 0;
        this.state.saveFormData.forEach(element => {
            l  ; 
        });

        console.log(l); // output: 0


        if(this.state.saveFormData.length == 0){
            this.setState({ openNew: false })
            console.log(this.state.saveFormData);
        }else{
            console.log(this.state.saveFormData);
            alert('we found Data'   JSON.stringify(this.state.saveFormData));
        }
    }

console.log 的輸出

Array []
?
length: 0
?
ort: "asd"
?
<prototype>: Array []

簡而言之的作業示例

if you start with the input, the array is written to the state after each input. Stack Snippet already shows an empty array here. The console in the browser shows an array with one element but with a length of 0.

In the similar answers I find, it always has to do with the fact that the console does not map the exact moment of the array, but only shows a reference, and retrieves the data just in time when it is unfolded.

in my case it seems to behave differently. Since also in the console the array length of 0 is shown

function App() {
  return ( < DataEditor / > );
}

class DataEditor extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      data: [],
      def: [],
      defRaw: [],
      loaded: false,
      isLoading: false,
      openNew: false,
      editFormLoaded: false,
      editFormData: [],
      saveFormData: []
    }

  }

  handleFormInput(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.state.saveFormData[name] = value;

    this.setState({
      saveFormData: this.state.saveFormData
    });
  }

  handleForm() {
    console.log("The Array Length is propably zero but we can access the element")
    console.log(this.state.saveFormData.ort);
    console.log("Log the testet Array")
    console.log(this.state.saveFormData);
    

    if (this.state.saveFormData.length == 0) {
      this.setState({
        openNew: false
      })
      console.log(this.state.saveFormData);
    } else {
      console.log(this.state.saveFormData);
      alert('we found Data'   JSON.stringify(this.state.saveFormData));
    }
  }

  render() {
    return ( <
      div >
      <
      input type = "text"
      name = "ort"
      onChange = {
        (e) => this.handleFormInput(e)
      }
      /> <
      button type = "button"
      onClick = {
        () => this.handleForm()
      } > Test State Access and Array < /button> < /
      div >
    );
  }
}


ReactDOM.render( < App / > , document.getElementById("root"));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

uj5u.com熱心網友回復：

這與 react 無關，只是內部陣列仍然是物件的實體，并且可以以相同的方式修改其屬性，而無需將它們實際添加到可迭代選項中。

這里的例子：

const array = [];

array.ort = "test";

console.log(array); // []
console.log(array.length); // 0
console.log(array.ort); // "test"

我建議改用一個物件并使用 Object.values 或 Object.entries 迭代它的值。

const object = {};

object.ort = "test";

console.log(object); // {ort: "test"}
console.log(Object.values(object).length); // 1
console.log(object.ort); // "test"

標籤：javascript arrays reactjs

上一篇：從函式回傳的元素不適用于事件偵聽器

下一篇：無法用jQuery聚焦？