Question

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

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>
    );
  }
}

TITLE.JS

import React from "react";

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

所以app.js是main，header.js是parent，title.js是child（如果我理解正确的话）。

我更改后title，因为new title，但feature变为undefined。知道什么是错的吗？我可能需要使用componentWillUpdate，但我不完全确定我会怎样做。

Answer 1

这是因为当你setState时，你只用替换title数组内部title属性，而不是{ {1}}。除非你有特定的理由要求这样一个复杂的状态，否则我认为你应该通过使用一个对象来减少问题：

feature

然后设置状态：

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 }));，可能会有更简洁的写作方式，但我无法正确测试。但是，上面的代码为does work。

修改

这应该可以解决问题：

Object.assign

Answer 2

当您运行设置状态时，您只是指定标题，而不是其他属性，因此它们被设置为未定义。

使用传播操作可以帮助解决这个问题（如果您有权访问它）。

this.setState((prevState, props) => {
  return {...prevState, title: [{title: titleChange }]};
});

如果没有，请确保在状态中设置的对象中包含所有其他值。

ReactJS - 在.setState成功调用之后，其他属性变为未定义

2 个答案: