Question

我在渲染方法上有一些小的异步问题。

我使用props变量初始化状态变量textInRenameTodoPopOverInput。

问题在于，当更改我的props变量时，状态变量始终保持为初始给定值（在本示例中为'dummyText'），因此当我的props this.props.todoToRename.text时，更改后，控制台始终返回：

>> Props in Modal {this.props.todoToRename.text} // Here the props has the expected new value
>> State in modal dummyText // But the state is not refresh and keep 'dummyText'

这是我简化的代码：

import React from "react";

export default class RenameTodoPopOver extends React.Component {

    constructor(props) {

        super(props);

        this.handleChange = this.handleChange.bind(this);

        this.state = {
            textInRenameTodoPopOverInput: this.props.todoToRename.text,
        }


    }

    handleChange = (event) => {
        this.setState({ textInRenameTodoPopOverInput: event.target.value });
    }

    render() {

        console.log('Props in Modal ' + this.props.todoToRename.text);
        console.log('State in modal ' + this.state.textInRenameTodoPopOverInput);

        return (
            <input type="text" defaultValue={this.state.textInRenameTodoPopOverInput} onChange={this.handleChange} />
        );
    }
}

您是否知道我的错误是什么或如何解决此问题？

Answer 1

您应该使用getDerivedStateFromProps更新基于组件状态的操作道具。

export default class RenameTodoPopOver extends React.Component {
    state = { textInRenameTodoPopOverInput: '' }

    static getDerivedStateFromProps(nextProps){
      if(nextProps.todoToRename.text){
        return {
          textInRenameTodoPopOverInput: nextProps.todoToRename.text
        }
      }
    }

    handleChange = (event) => {
        this.setState({ textInRenameTodoPopOverInput: event.target.value });
    }

    render() {
        console.log('Props in Modal ' + this.props.todoToRename.text);
        console.log('State in modal ' + this.state.textInRenameTodoPopOverInput);

        return (
            <input type="text" defaultValue={this.state.textInRenameTodoPopOverInput} onChange={this.handleChange} />
        );
    }
}

Answer 2

您的代码存在一些问题： 1.您正在使用道具并将其分配给不良状态。 2.您可以将“状态”转移到父组件，并让父组件发送文本并以道具的形式处理函数

    //in the parent component
import React from "react";

export default class ParentRenameTodoPopOver extends React.Component {

    constructor(props) {

        super(props);

        this.handleChange = this.handleChange.bind(this);

        this.state = {
            textInRenameTodoPopOverInput: this.props.todoToRename.text,
        }


    }

    handleChange = (event) => {
        this.setState({ textInRenameTodoPopOverInput: event.target.value });
    }

        render() {
            return (
                <RenameTodoPopOver 
                textInRenameTodoPopOverInput= 
 {this.state.textInRenameTodoPopOverInput}
                handleChange = {this.handleChange}
    />
            );
        }
    }

export default ParentRenameTodoPopOver

现在，子组件中的子组件获得了状态和父组件的状态并对其进行处理。

//in the child component
import React from "react";

const RenameTodoPopOver = (props)=>
        return (
            <input 
             type="text" 
             defaultValue={props.textInRenameTodoPopOverInput} 
             onChange={props.handleChange} />
        )
}
export default RenameTodoPopOver;

在设计React组件时，如果将组件分为纯功能性组件和纯表现性组件，则编写起来会更容易。这里的父组件纯粹是功能性的，另一方面，它具有所有逻辑，子组件纯粹是功能性的，它没有逻辑，它通过道具从父级传递给它的所有功能和状态。

在渲染中异步反应状态

2 个答案: