Question

将函数update传递到todo函数的onSave组件时。我保存表格。我将函数称为onSave。错误：this.props.update不是函数。

当我单击“保存”时，它会自动刷新页面。

class App extends React.Component {
    constructor() {
        super();

        this.state = {

            todos: [{
                id: 1,
                date: '2019-12-09',
                description: 'Hello'
            }, {
                id: 2,
                date: '2019-11-10',
                description: 'World'
            }],
            isEditing: false,
            id
        };
    this.update = this.update.bind(this)
    }

    update(id, time) {
        this.setState({
            todos: this.state.todos.map(el => (el.id === id ? Object.assign({}, el, {
                time
            }) : el))
        });

        setEditing = (id) => {
            this.setState({
                isEditing: !this.state.isEditing,
                id: id
            })
        }

        render() {
            return ( < div >
                < ul > {
                    this.state.todos
                        .map((todo, index) =>
                            < Todo key = {
                                todo.id
                            }
                            index = {
                                index
                            }
                            todo = {
                                todo
                            }
                            setEditing = {
                                this.setEditing
                            }
                            update = {
                                this.update
                            }
                            />
                        )
                } < /ul> < /div>
            );
        }
    }

    * * Todo * *

        class Todo extends Component {

            state = {
                startDate: new Date(),
                description: '',
            }

            handleChange = (date) => {
                this.setState({
                    startDate: date
                });
            }

            handleDescription = (evt) => {
                this.setState({
                    description: evt.target.value
                })
            }

            saveEdit = () => {
                const {
                    description, status
                } = this.state;

                this.props.update(this.props.id, {
                    description,
                    status,
                    date: this.state.date
                })
            }

            onSave = () => {

                const {
                    description
                } = this.state;

                this.props.update(this.props.id, {
                    description, date: this.formatDate()
                });

                this.setState({
                    isEditing: false
                })
            }

            componentDidMount = () => {
                const {
                    todo
                } = this.props;

                this.setState({
                    description: todo.description,
                    startDate: new Date(todo.date)
                })
            }

            render() {

                return ( < div > {
                        this.state.isEditing

                            ? ( < EditForm handleChange = {
                                this.handleChange
                            }
                            description = {
                                this.state.description
                            }
                            startDate = {
                                this.state.startDate
                            }
                            handleDescription = {
                                this.handleDescription
                            }
                            onSave = {
                                this.onSave
                            }
                            onCancel = {
                                this.onCancel
                            }
                            />): ( < li >
                                < div > {
                                    this.props.todo.date
                                } < /div> < div > {
                                    this.props.todo.description
                                } < /div> < button onClick = {
                                    this.setEditing(this.props.todo.id)
                                } > Edit < /button> < /li>
                            )

                        } < /div>
                    )
                }
            }

Answer 1

您需要在父代的构造函数中绑定更新函数，以便在子代中工作以作为对父代函数的引用，例如：

 class App extends React.Component {
  constructor() {
    super();

    this.state = {

      todos: [
        {
          id: 1,
          date: '2019-12-09',
          description: 'Hello'
        },
        {
          id: 2,
          date: '2019-11-10',
          description: 'World'
        }
      ],
      isEditing: false,
      id
    };
   //this line right here is the difference
   this.update = this.update.bind(this)

  }
//blablabla
}

然后，当您在子级中执行this.props.update（）时，将要执行的功能是父级中的那个，从而改变了父级状态。

Answer 2

您要使用箭头语法（update = () => {}）声明更新方法。

这意味着上下文将始终保持在声明函数的位置。

如果您希望上下文适用于更改，则需要使用标准语法

function update () {
  ...
}

或在类中可以这样声明：

update () {
  ...
}

使用标准语法，您可以选择将上下文绑定到要应用该函数的位置，如下所示：

this.update = this.update.bind(this);

Answer 3

您传递给EditForm的处理程序需要绑定到this，以便您引用处理程序中的当前组件。

在您的处理程序中，this当前很可能是触发事件的组件。

尝试：

this.onSave.bind(this)

您甚至可以在ctor中执行一次操作：

this.onSave = this.onSave.bind(this);

Answer 4

您可以尝试

<Todo
     key={todo.id}
     index={index}
     todo={todo}
     setEditing={this.setEditing}
     update={() => this.update()}
/>

根据ID更新对象，错误“ this.props.update”不是函数

4 个答案: