Question

我有一个React.Component可以呈现对通过const定义的其他对象的引用

这是我的代码的一部分

const TodoList = ({data, remove}) => {
  let source = data.map((todo) => {
    return (<TodoItem todo={todo} id={todo.id} remove={remove}/>)
  }) 

  return (<ul>{source}</ul>)
}

export default class HomePage extends React.Component {

  constructor(props) {
    super(props);
    console.log("Start home page")

    this.state = {
      data: []
    }

    this.getAllTasks = this.getAllTasks.bind(this);
  }

  render() {
    return (
      <div className={styles.content}>
        <h1>Home Page</h1>
        <p className={styles.welcomeText}>Thanks for joining!</p>
        <button onClick={this.getAllTasks}>Request all tasks</button>
        <button onClick={this.getSpecificTask}>Get specific task</button>
        <button onClick={this.createTask}>Create task</button>
        <button onClick={this.editTask}>Edit task</button>
        <button onClick={this.deleteTask}>Delete task</button>

        <div id="container">
          <TodoForm addTodo={this.addTodo.bind(this)} />
          <TodoList 
            todos={this.state.data}
            remove={this.handleRemove.bind(this)} />
        </div>
      </div>
    );
  }
}

将TodoForm和TodoList添加到渲染器后，我遇到了问题。首先是TodoList的内部状态未定义。通过更具体：

page.js:85 Uncaught TypeError: Cannot read property 'map' of undefined
    at TodoList (page.js:85)

首先，我还没有投入足够的时间来了解所有这些工作的原理（具有不同的主要技术堆栈，并且该应用程序的截止日期很紧）。源代码显示data是通过外部类传递的自动生成的引用_ref3获得的。

我看到外部类定义并初始化了data结构，因此应该定义data。

您看到我在这里错过的问题吗？

Answer 1

好的，您没有正确地进行销毁这样做

const TodoList = ({todos, remove}) => {
 let source = todos.map((todo) => {
 return (<TodoItem todo={todo} id={todo.id} remove={remove}/>)
 }) 

return (<ul>{source}</ul>)
}

您将道具作为待办事项传递，并将其作为数据进行破坏

希望有帮助

Answer 2

正如其他解决方案/答案所述，您没有正确地进行销毁，因此遇到了错误。

除了上述解决方案之外，您还可以为本地作用域名称data加上别名，如下所示：

const TodoList = ({todos: data, remove}) => {    // <---------------------
                   ^^^^^^^^^^^
  let source = data.map((todo) => {
    return (<TodoItem todo={todo} id={todo.id} remove={remove}/>)
  }) 

  return (<ul>{source}</ul>)
}

您正在TodoList中获得一个对象，该对象恰好是您要解构的props，它必须逐个键匹配，但是您可以使用:作为别名来实现通用的本地名称范围

从引用的组件访问外部React组件

2 个答案: