调用 setState 后对象属性变为未定义

Question

我是 React js 的新手，我想问一下，我有一个对象，我想更新对象的一些属性，但是当我更改对象的一个属性时，另一个属性也被更新并且值未定义我尝试使用扩展运算符但是当我运行时，它显示错误未定义。这是我的代码

export default class Message extends React.Component {

  constructor(props){

    super(props);

      this.state = {

        isLoggedIn: SystemStore.isLoggedIn(),

        profile: ProfileStore.getProfile(),

        messageInfo: {

          fullName: SystemStore.systemUser().fullName,

          site: '',

          email: '',

          phone: '',

        },

        subject: '',

        description: '',

        type: '',

        errorMessage: '',

        errorDialog: '',

        isSubmited: false,

        successMessage: '',

        submitting: false

      };

....

  clearForm(){

    this.setState({

      messageInfo: {

        ...messageInfo, //in here i get error messageInfo is not defined

          subject: '',

          description: ''//if doing this i get error SyntaxError

      }})

  }

  handleProfileChange(){

    this.setState({

      messageInfo: {

        ....messageInfo, site: ProfileStore.getProfile().primarySite.name,

      }});

    console.log(this.state.messageInfo.fullName);

    console.log(this.state.messageInfo.site);

  }

  handleSubjectChange(evt){

    this.setState({ subject: evt.target.value }, () => {

      if(this.state.messageInfo.subject === 'PRAYER') {

        this.setState({ type: 'REQUEST' });

      } else if(this.state.messageInfo.subject === 'ADDRESS') {

        this.setState({ type: 'INFORMATION' });

      } else if(this.state.messageInfo.subject === 'VISIT'){

        this.setState({ type: 'REQUEST' });

      }

    });

  }

    

  handleMessageChange(evt){

    this.setState(prevState=>({

      messageInfo: {

        ...prevState.messageInfo, description: evt.target.value

      }}));

  }

有什么建议我错了吗？谢谢

Answer 1

您所在的州有多个属性。messageInfo例如，如果您从属性and开始type，然后再使用this.setState({ messageInfo: newMessageInfo })，那么新状态将只有属性messageInfo；该type属性将丢失，因为它的值未传递给setState。setState相反，在定义新属性之前将先前的状态传播到调用中：clearForm(){  this.setState({    ...this.state,    messageInfo: {      ...this.state.messageInfo,      // ...和handleSubjectChange(evt){  this.setState({ ...this.state, subject: evt.target.value }, () => {等等。

Answer 2

您不能直接访问messageInfo. 有两种获取方式：clearForm(){    this.setState({      messageInfo: {        ...this.state.messageInfo,          subject: '',          description: ''      }    })  }或者clearForm(){    this.setState((prevState) => {      messageInfo: {        ...prevState.messageInfo,        subject: '',        description: ''      }   })  }

Answer 3

在 clearForm(){} 函数中你不能直接使用 messageInfo，你应该定义一个状态类型而不是变量。        clearForm(){         this.setState({          messageInfo: {           ...this.state.messageInfo,               subject: '',              description: ''           }})        }