如何將對象推入 ReactJS 中的數組

Question

我有以下情況。 我從后端獲取數據，響應是一堆對象。 我想迭代它們，並且在每次迭代中，我都想將它們推入我的 state。

這是我從后端獲取數據的方式：

     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);

這是我在沙盒中的代碼

Answer 1

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

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

由於您總是使用空數組進行實例化，因此您也不需要虛假檢查，即您可以刪除if (books) 。

Answer 2

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

Answer 3

使用Object.values代替Object.entries 。

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

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

Answer 4

在你的useEffect使用 store selector 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>

Answer 5

從不建議直接突變 state。

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

對於功能組件

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

最后推送值：

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

在開頭推送值：

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

對於 Class 組件

將字符串推到數組的末尾，你這樣做......

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

將字符串推到數組的開頭，你可以這樣做......

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

將 object 推到數組的末尾，你這樣做......

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

將 object 推到數組的開頭，你這樣做......

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