javascript - react : How to iterate through state and output to jsfiddle page

Question

我正在学习 react 。我想做的就是渲染输出。为什么我的页面没有呈现？仅供引用，https://jsfiddle.net/salvatoreasantamaria/r35ckyat/

class Hello extends React.Component {

constructor() {
      super();
      this.state = {
        test: 'Hi!',
        todos: [
        {
          id: 10,
          name: 'ten'
        },
         {
            id: 20,
            name: 'twenty'
        }
        ]
      }
    } 


  render() {
    return this.state.todos.map((data) => (
    {todo.name}
    ))
   }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

Answer 1

您似乎想要呈现待办事项列表。所以你应该包裹你的 .map()逻辑轮a <ul>标记并创建 li每个待办事项的标签。请参阅下面的沙箱和代码:https://codesandbox.io/s/young-pine-zmpvr

class App extends React.Component {
  state = {
    test: "Hi!",
    todos: [
      {
        id: 10,
        name: "ten"
      },
      {
        id: 20,
        name: "twenty"
      }
    ]
  };

  render() {
    return (
      <div>
        Todos:
        <ul>
          {this.state.todos.map(todo => {
            return <li>{todo.name}</li>;
          })}
        </ul>
      </div>
    );
  }
}