0

New to React and async stuff on javascript, and have looked through a few similar questions on StackOverflow

  1. Can I set state inside a useEffect hook
  2. Is useState synchronous?
  3. React Hook useEffect issue with setState

Here's my useEffect. I'm doing a fetch (in getPieData), using the response to set investment's state (it returns an array), then using investment's new value to set the state of funds (looping through the array). I run console.log and see that the value does exist, but when I run setFundslist and then later map its value in a component, I get undefined is not a function. Setting investment earlier works, so I'm wondering if it's the for loop itself and something to do with asynchronosity that is causing me problems.

  React.useEffect(() => {


    getPieData().then(response => {
      setInvestment(response);
      return response;
    })
    .then((investmentResponse) => {
        const funds = []
        for (var i = 0; i < investmentResponse.length; i++) { 
          funds.push(investmentResponse[i])
        }
        return funds
      })
      .then(funds => {
        setFundsList(funds)
        console.log(funds)
      })
  }, []);

Then in my component, at the asterisked line, I get the following error: TypeError: undefined is not a function (near '...funds.map...')

export default function Table({ fundsList }) {

  const [funds, setFunds] = React.useState([]);

  React.useEffect(() => {

**********setFunds(fundsList.map(strat => ({***************

      gainToday: "0.00%",
      title: strat,
      gainOverall: "0.00%"
    })).then(console.log(funds))

  }, []);

return(
              {funds.map(fund => (
               // some stuff
            <tr key={fund.title}>
               // some stuff
          ))}
)

}
VampireTooth
  • 3
  • 2
  • Share the full error, including line number and also share the line that triggers the error. – Evert Sep 23 '21 at 19:24
  • @Evert just updated – VampireTooth Sep 23 '21 at 19:35
  • in the code you shared, `funds` is not defined, so it makes sense that you would get an error there. There's no `funds` variable created before. – Evert Sep 23 '21 at 19:49
  • Oh, I thought my setFunds() method made it implicit and didn't want to code overload, but I do have a const funds set with React.useState("") at the start – VampireTooth Sep 23 '21 at 20:01
  • So you initialize `funds` a an empty string. There is no `.map()` function on strings. It only turns into an array after you get the results. – Evert Sep 23 '21 at 20:12
  • Dang, changed that to React.useState([]) and I'm getting a different error that represents the same symptom. Edited asterisks in code accordingly, but still looks like the Table component is just getting a null instead of an object passed in. I thought adding the { fundsList && } would prevent this, but looks like that isn't the case
     – VampireTooth Sep 23 '21 at 20:18
  • Hard to say but if you do `fundsList &&` and `fundsList` is always an array, then it's also always true. – Evert Sep 23 '21 at 20:22
  • `setFunds` doesn't return a promise so you can't use then. If you want to handle the value after it is set you need to handle it in the next render cycle – pilchard Sep 23 '21 at 21:56
  • @pilchard doesn't everything in the html render (aka everything in return() ) happen in the first render cycle? How can I get the value of funds accessible to the html? I sense I'm not using the right lingo here but hopefully my question makes sense – VampireTooth Sep 23 '21 at 23:33
  • This is expected, it will be empty on the first render, then the useEffect will run, then it will render with the data set. So put a conditional in your return `{funds.length? ...`, or [lazily initialize](https://reactjs.org/docs/hooks-reference.html#lazy-initial-state) your state by passing a callback to `useState` – pilchard Sep 23 '21 at 23:35

0 Answers0