0

I have a quick and small issue that seems to be a scoping issue I can not solve. I have a functional component that makes an axios call to an api which retrieves information about homes listed on the market. It receives an array of 40 different results from the api. I want to iterate through the first 10 results in the array and for each iteration, create a new objects that grabs data from the response. Once the object is create, I want to then append the newly created object to the setState array in a functional component within react.

It is currently generating the new object correctly, but the issue is that it is not appending it to the setPropertyState. With each iteration, it is reseting the propertyList state as the created property object and getting rid of the last created property that is appending. I know it is a scoping issue but I can not figure it out at all. Can someone help with this.

axios request and object creation:

  const [propertyList, setPropertyList] = useState([])

  function requestInitialListings(){
    axios.request(options).then(function (response) {
      let resultList = response.data.props
      console.log(resultList)
      for(let i = 0; i < 10; i++){
        let currentProperty = resultList[i]
        let createdProperty = {
          'address': currentProperty['address'],
          'bathrooms': currentProperty['bathrooms'],
          'bedrooms': currentProperty['bedrooms'],
          'country': currentProperty['country'],
          'currency': currentProperty['currency'],
          'daysOnZillow': currentProperty['daysOnZillow'],
          'hasImage': currentProperty['hasImage'],
          'imgSrc': currentProperty['imgSrc'],
          'listingStatus': currentProperty['listingStatus'],
          'livingArea': currentProperty['livingArea'],
          'lotAreaUnit': currentProperty['lotAreaUnit'],
          'lotAreaValue': currentProperty['lotAreaValue'],
          'price': currentProperty['price'],
          'propertyType': currentProperty['propertyType'],
          'zpid': currentProperty['zpid'],
          'brokerageName': null,
          // the following will default to null
          'propertyTaxRate': null,
          'zestimate': null,
          'rentZestimate': null,
          'associationFee': null,
          'hasHomeWarranty': null,
          'depositsAndFees': null,
          'hasAssociation': null,
          'hoaFee': null,
          'mortgageRates': {
            'armRate': null,
            'fifteenYearFixedRate': null,
            'thirtyYearFixedRate': null,
          },
          'mlsid': null,
          'listingAgent': null,
        }
>>>>>>>>setPropertyList([ ...propertyList, createdProperty])
      }
    }).catch(function (error) {
      console.error(error);
    });
  }

*** I have marked the line that appends object to property list with >>> ***

Here is what is being outputed in the console:

property list has changed
[{…}]
0: {address: '1102 Maple St, Santa Monica, CA 90405', bathrooms: 3, bedrooms: 4, country: 'USA', currency: 'USD', …}
length: 1
[[Prototype]]: Array(0)

[{…}]
0: {address: '405 Palisades Ave, Santa Monica, CA 90402', bathrooms: 5, bedrooms: 6, country: 'USA', currency: 'USD', …}
length: 1
[[Prototype]]: Array(0)

property list has changed
[{…}]
0: {address: '819 Cedar St, Santa Monica, CA 90405', bathrooms: 3, bedrooms: 4, country: 'USA', currency: 'USD', …}
length: 1
[[Prototype]]: Array(0)
  • Build up an array of `createdProperty` objects within the loop then assign them all using `setPropertyList` after the loop completes. Or use the functional setter, eg `setPropertyList(prev => [...prev, createdProperty])` – Phil Nov 04 '21 at 05:35
  • FYI, you're running into [this problem](https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately) – Phil Nov 04 '21 at 05:35

0 Answers0