javascript - React:如何遍历状态并输出到jsfiddle页面

我只是在学习反应。我要做的就是渲染输出。为什么我的页面无法渲染？供参考，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')
);

最佳答案

您使用的地图错误，
正确的方法是

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

在这里，您将待办事项的每个元素作为数据传递给函数。由于您正在使用react，因此可以像这样使用jsx

render() {
    const text = this.state.todos.map((data) => (
    <span>{data.name}</span>
    ))
    return <div>{text}</div>
   }

关于javascript - React:如何遍历状态并输出到jsfiddle页面，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56661375/