Question

我在发送道具两次时获得了未定义的地图

import React, { Component } from 'react'
import Todo from './Todo';

export default class App extends Component {
  state =  {
    todos: [
    {id : 1 , content: "lets sleep"},
    {id: 2, content:"lets eat "}
  ]}

  deletTodo =  (id) => {
    console.log(id)
}

  render() {
    return (
      <div className="App container">
      <h1 className="center blue-text">Todo's</h1>
         <Todo todo = {this.state.todos} />
         { <Todo deletTodo = {this.deletTodo}/> }
      </div>
    )
  }
}

这使我无法定义地图，但以下代码可解决我不知道为什么有人解释的技巧

 <Todo todo = {this.state.todos} deletTodo= {this.deletTodo}/>

以下是我正在获取道具的Todo.js

import React, { Component } from 'react'

export default class Todo extends Component {

    render() {
       return (
            <div className= "todos collection">
            {
            this.props.todo.map((td)=>{
            return (
                <div  className="collection-item" key ={td.id} >
             <span>{td.content}</span>
             </div>
              )})}


            </div>
        )
    }
}

Answer 1

组件的使用都会创建单独的实例。只有您在该实例中提供的道具才能用作this.props。

在<Todo todo = {this.state.todos} />中的

只有todo prop可用，而deletTodo不可用。在{ <Todo deletTodo = {this.deletTodo}/> }中，只有deletTodo可用，而todos prop不可用。这就是您将收到错误Cannot read property 'map' of undefined的原因。您可以通过提供默认道具来解决此问题，以使所有道具都不会被定义。

Todo.defaultProps = {
  todo: [],
  deletTodo: () => null,
}

Answer 2

在构造函数中设置状态

constructor() {
        super();
        this.state = {
           //set state here
    }

从父组件到子组件两次发送道具

2 个答案: