如何在ReactJS中將物件推入陣列

我有以下情況。我從后端獲取資料，回應是一堆物件。我想迭代它們，在每次迭代中，我想將它們推入我的狀態。

這是我從后端獲取資料的方式：

     const allBookings = useSelector(getBookings);

      useEffect(() => {
        dispatch(
          fetchBookings.request({
            getAll: true,
          })
        );
      }, [dispatch]);

這是我的資料：

bookings:{
  0:{id: 294, address: '1585 Charleston Rd, Mountain View, CA, USA', broker:{name:'aaa'}},
  1:{id: 294, address: '1586 Charleston Rd, Mountain View, CA, USA', broker:{name:'bbb'}},
  2:{id: 294, address: '1587 Charleston Rd, Mountain View, CA, USA', broker:{name:'ccc'}}
}

在這里，我試圖將我的資料設定在陣列中，但是出了點問題，請幫助我弄清楚如何實作。最終的結果應該是這樣的：

    [
      {id: 294, address: '1585 Charleston Rd, Mountain View, CA, USA', broker:{name:'aaa'}},
      {id: 294, address: '1586 Charleston Rd, Mountain View, CA, USA', broker:{name:'bbb'}},
      {id: 294, address: '1587 Charleston Rd, Mountain View, CA, USA', broker:{name:'ccc'}}
    ]

     if (!allBookings) return null;

      const book = allBookings.bookings;
      const [books, setBooks] = useState([]);
      useEffect(() => {
        if (book) {
          const x = Object.entries(book);
          setBooks(x);
        }
      }, [book]);

    console.log('books===>', books);

這是我在沙箱中的代碼

uj5u.com熱心網友回復：

改變const x = Object.entries(book)；到const x = Object.values(book);

uj5u.com熱心網友回復：

在您useEffect使用商店選擇器 var 來觀察變化時，

你也不應該在你的情況下使用Object.entries，而是使用Object.values，

Object.entries 將獲得鍵和值，并將它們作為每個條目的陣列，如

[["0",{id: 294, address: '1585 Charleston Rd,...}]]

但Object.values只會從值（您的物件）創建新陣列

你的代碼應該看起來像

  const [books, setBooks] = useState([]);
  useEffect(() => {
    if (allBookings.bookings) {
      const entries = Object.values(allBookings.bookings);
      setBooks(entries);
    }
  }, [allBookings]);

試試下面的代碼片段：

顯示代碼片段

// Get a hook function
const {useState, useEffect } = React;

const Example = ({title}) => {
   let serverObject = {
    bookings:{
      0:{id: 294, address: '1585 Charleston Rd, Mountain View, CA, USA', broker:{name:'aaa'}},
      1:{id: 294, address: '1586 Charleston Rd, Mountain View, CA, USA', broker:{name:'bbb'}},
      2:{id: 294, address: '1587 Charleston Rd, Mountain View, CA, USA', broker:{name:'ccc'}}
    }
  }
  
  const [allBookings, setAllBookings] = useState({});
  
  const [books, setBooks] = useState([]);
  
  setTimeout(()=> { setAllBookings(serverObject)},  2000)
  
  
  useEffect(() => {
    if (allBookings.bookings) {
      const entries = Object.values(allBookings.bookings);
      setBooks(entries);
    }
  }, [allBookings]);
  
  return (
    <div>
      {
         books.map( book => <p> {book.address} </p>)
      }
    </div>
  );
};

// Render it
ReactDOM.render(
  <Example title="Example using Hooks:" />,
  document.getElementById("app")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

<div id="app"></div>

uj5u.com熱心網友回復：

使用功能更新將新的整體推送到您的books陣列中：

const x = Object.entries(book);
setBooks(books => [...books, ...x]);

由于您總是使用空陣列進行實體化，因此您也不需要虛假檢查，即您可以洗掉if (books).

uj5u.com熱心網友回復：

使用Object.values代替Object.entries.

此外，將新資源與以前的資源合并。

const data = Object.entries(book);
setBooks(books => [...books, ...data]);

uj5u.com熱心網友回復：

從不建議直接改變狀態。

在更高版本的 React 中推薦的方法是在修改狀態時使用更新程式函式來防止競爭條件：

對于功能組件

const [array,setArray] = useState([]);

最后推送值：

setArray(oldArray => [...oldArray,newValue] );

一開始推送值：

setArray(oldArray => [newValue,...oldArray] );

對于類組件

將字串推到陣列的末尾，你這樣做......

this.setState(prevState => ({
  myArray: [...prevState.myArray, "new value"]
}))

將字串推到陣列的開頭，你這樣做......

this.setState(prevState => ({
  myArray: ["new value", ...prevState.myArray]
}))

將物件推到陣列的末尾，你這樣做......

this.setState(prevState => ({
  myArray: [...prevState.myArray, {"name": "object"}]
}))

將物件推到陣列的開頭，你這樣做......

this.setState(prevState => ({
  myArray: [ {"name": "object"}, ...prevState.myArray]
}))

標籤：javascript 反应

上一篇：如何命名一個改變物件“隱藏”/“顯示”狀態的函式？

下一篇：在字串陣列上添加自定義連接