javascript - ReactJS - .setState 成功调用后其他属性变得未定义

Question

我设置了一个具有输入框和标题的应用程序。标题输入更改 onChange ，从而更新显示的标题。状态是一个带有数组 {title:[{title: 'Welcome', feature: 'test'}] 的对象，我成功 setState 为 title，但功能随后变得未知。参见代码:

APP.JS

import React from "react";
import Header from "./Header";

export default class Layout extends React.Component {
  constructor() {
    super();
    this.state = {
      title: [{
        title: 'Welcome',
        feature: 'test'
      }]
    };
  }

  changeTitle(titleChange) {
    this.setState({title: [{title: titleChange }]});
  }

  render() {
    return (
      <div>
        <Header changeTitle={this.changeTitle.bind(this)} title={this.state.title[0].title} feature={this.state.title[0].feature} />
      </div>
    );
  }
}

HEADER.JS

import React from "react";
import Title from "./Header/Title";

export default class Header extends React.Component {
  handleChange(e) {
    const title = e.target.value;
    console.log(e, title);
    this.props.changeTitle(title);
  }

  render() {
    console.log(this.props.title) //This test Works
    console.log(this.props.feature) //This test Works
    return (
      <div>
        <Title title={this.props.title} />
        <h4> Feature Here: {this.props.feature} </h4> //This disappears after I change input
        Title Here: <input value={this.props.title} onChange={this.handleChange.bind(this)} />
      </div>
    );
  }
}

标题.JS

import React from "react";

export default class Title extends React.Component {
  render() {
    return (
      <h1>{this.props.title}</h1>
    );
  }}

所以 app.js 是 main，header.js 是父级，title.js 是子级(如果我理解正确的话)。

我更改后，title因为新标题，但feature变成undefined。知道出了什么问题吗？我可能需要使用 componentWillUpdate 但我不完全确定我会如何使用。

Answer 1

这是因为当您setState时，您将title数组批量替换为仅内部title属性，而不是功能。除非你有一个特定的原因要拥有如此复杂的状态，否则我认为你应该通过使用一个对象来减少问题:

this.state = { title: 'Welcome', feature: 'test' };

然后设置状态:

changeTitle(titleChange) {
  this.setState({ title: titleChange });
}

并构建您的标题:

<Header
  changeTitle={this.changeTitle.bind(this)}
  title={this.state.title}
  feature={this.state.feature}
/>

如果您出于某种原因无法更改状态结构，请尝试以下操作:

  this.setState(Object.assign({}, this.state.title[0], { title: titleChange }));

可能有一种更简洁的编写方式，无需使用Object.assign，但我无法正确测试它。然而上面的代码does work .

编辑

这应该可以解决问题:

this.setState({ ...this.state.title[0], title: 'a' });