Console.log() 有一个值，但是当我将它与 map 函数一起使用时，它变得未定义 [ReactJS]

Question

I'm very new to react.

can you help me, please 😭

I have spent a lot of time to research this error. but I found nothing to solve my problem.

I use console.log() it returns an array.

but the next line, I used it with .map() function on line 30

it throws an error.

TypeError: Cannot read property 'map' of undefined

this is my render() function

  render() {
    return (
      <div>
        {console.log("errrrrrrrrrrrrr",this.state.allowedRoutes)}
        {this.state.allowedRoutes.map(route => (
          <Route
            exact
            path={route.url}
            component={allRoutes[route.component]}
            key={route.url}
          />
        ))}
        {this.state.redirectRoutes.map(url => (
          <Redirect to={url} />
        ))}
      </div>
    );
  }

it logged the {console.log("errrrrrrrrrrrrr",this.state.allowedRoutes)} 's value.

but It cannot use map() function.

this is what my browser logged.

errrrrrrrrrrrrr (8) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

this is an error my browser:

Answer 1

as error implies, this.state.allowedRoutes is undefined, either after logging the value or on subsequent renders. you should also post your code too.
But for a workarround you can check not to be undefined with this.state.allowedRouter && this.state.allowedRoutes.map()

As a side note, apparently you are updating your state in render method which is also not correct.

Answer 2

It's likely that at some point you're updating your state and by mistake deleting allowedRoutes . If you set your state without destructuring it first, all previous data will be removed, examples:

// WRONG - STATE BECOMES { allowedRoutes: myArray }
this.setState({
  allowedRoutes: myArray
});

// RIGHT - STATE BECOMES { all previous properties plus allowedRoutes: myArray }
this.setState({
  ...this.state,
  allowedRoutes: myArray
});

Also be sure to be initializing allowedRoutes as an empty array if you want to use map without checking the value first ( map is an array method).

If you're using classes:

constructor(props) {
    super(props);
    this.state = {allowedRoutes: []};
}

If you're using hooks:

const [allowedRoutes, setAllowedRoutes] = useState([]);

Answer 3

Your picture shows that the exception was thrown inside .map :

this.state.allowedRoutes.map(
  // the exception was thrown here
  ...
)

Please notice at this line, you can see allRoutes is not defined in the current scope.

component={allRoutes[route.component]}