React: Rendering a method defined inside arrow function?

问题

Hello friends! I hope you are well.

I've got an arrow function called WorldInfo and its parent component is passing down an object in props that for the sake of this example, I'm just calling object. Now In WorldInfo I also want to parse and list the items in object, so I've created the method serverInfoTabList to take object and shove it through .map. My problem is when compiled, my browser does not recognize serverInfoTabList either when it's defined nor called in WorldInfo's own return function.

Here is the error and the code itself.

 Line 7:5:    'serverInfoTabList' is not defined  no-undef
 Line 34:22:  'serverInfoTabList' is not defined  no-undef

const WorldInfo = (props) =>  {

    serverInfoTabList = (object) => {
        if (object != undefined){
            return object.item.map((item) => {
                const time = Math.trunc(item.time/60)
                return (
                    <li key={item._id}>{item.name}
                        <br/>
                        Minutes Online: {time}
                    </li>
                );
            });
        }
    }

    return (
        props.object!= undefined ? 
        <div className={props.className}>
            <h1>{props.world.map}</h1>
            {/* <img src={props.object.image}/> */}
            <div>
                <ul>  
                    {serverInfoTabList(props.object)}
                </ul>
            </div>
        </div>
        : 
        null
    );
}

Thanks for your time friendos!

回答1:

You forgot the const declaration

const serverInfoTabList = (object) => {
    /* ... */
}

The other problem is that you're accessing properties which doesn't exist props.world for instance. Also you're mapping through an undefined property props.object.item. I've corrected your sandbox

const WorldInfo = props => {
  const serverInfoTabList = object => {
    return Object.keys(object).map(key => {
      const item = object[key];
      const time = Math.trunc(item.time / 60);
      return (
        <li key={item._id}>
          {item.name}
          <br />
          Minutes Online: {time}
        </li>
      );
    });
  };

  return props.object ? (
    <div className={props.className}>
      <h1>{props.world.map}</h1>
      {/* <img src={props.object.image}/> */}
      <div>
        <ul>{serverInfoTabList(props.object)}</ul>
      </div>
    </div>
  ) : null;
};

class Todo extends Component {
  render() {
    const object = { item1: { _id: 1, time: 1 }, Item2: { _id: 2, time: 2 } };
    return (
      <div>
        <WorldInfo object={object} world={{ map: "foo" }} />
      </div>
    );
  }
}

来源：https://stackoverflow.com/questions/58628720/react-rendering-a-method-defined-inside-arrow-function