如何在React.js中列出并渲染数据？附代码求助

Got it, let's get your React component rendering that list properly. I spotted a couple of small syntax and implementation issues that are holding it back:

Issues in the Original Code #

• You're missing a closing parenthesis for the data.map() call — this will throw a syntax error right off the bat.
• You created the listItems variable with your mapped <li> elements, but never actually included it in the JSX you're returning, so the list never shows up.

Corrected Component Code #

class First extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const data = [{"name":"test1"},{"name":"test2"}];
    // Fixed: Added closing parenthesis for map()
    const listItems = data.map((d) => <li key={d.name}>{d.name}</li>);
    return (
      <div>
        hello
        {/* Fixed: Added the listItems inside a ul to render them */}
        <ul>{listItems}</ul>
      </div>
    );
  }
}

Quick Notes on the Fixes #

• The map() method now has its closing parenthesis, so the JavaScript parser can correctly interpret the function call.
• We added <ul>{listItems}</ul> inside the returned <div> — this tells React to render your generated list items as part of the component's output.
• Nice job using a unique key for each list item! Using d.name here works perfectly as long as all names in your data array are unique, which helps React efficiently update the list later.

内容的提问来源于stack exchange，提问作者Manisha