Javascript ReactJS-After.setState调用成功其他属性未定义

我设置了一个有输入框和标题的应用程序。标题输入更改

onChange

，更新显示的标题。状态是一个数组为

{title:[{title:'Welcome'，feature:'test'}]

的对象，我成功地为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>
    );
  }
}

从“React”导入React；
从“/Header”导入标题；
导出默认类布局扩展React.Component{
构造函数（）{
超级（）；
此.state={
标题：[{
标题:"欢迎",，
功能：“测试”
}]
};
}
更改标题（标题更改）{
this.setState（{title:[{title:titleChange}]}）；
}
render（）{
返回(
);
}
}

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

从“React”导入React；
从“/Header/Title”导入标题；
导出默认类标头扩展React.Component{
手变（e）{
const title=e.target.value；
控制台日志（e，标题）；
此.props.changeTitle（标题）；
}
render（）{
console.log（this.props.title）//此测试有效
console.log（this.props.feature）//此测试有效
返回(
此处的功能：{this.props.Feature}//在我更改输入后，此功能消失
标题如下：
);
}
}

TITLE.JS

import React from "react";

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

从“React”导入React；
导出默认类标题扩展React.Component{
render（）{
返回(
{this.props.title}
);
}}

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

我更改后，

标题

，因为

新标题

，但

功能

变为

未定义

。知道怎么了吗？

---

我可能需要使用

组件willupdate

，但我不完全确定如何使用。

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

使用“排列”操作可以对此有所帮助（如果您可以访问它）

---

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

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

使用“排列”操作可以对此有所帮助（如果您可以访问它）

---

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

这是因为当您

设置状态

时，您将

标题

数组全部替换为内部

标题

属性，而不是

功能

。除非您有这样一个复杂状态的特定原因，否则我认为您可以只使用一个对象可以减少问题：

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}
/>

如果没有

Object.assign

，可能有一种更简洁的编写方法，但是我无法正确地测试它

编辑

这应该可以做到：

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

---

这是因为当您

设置state

时，您将

标题

数组整体替换为内部

标题

属性，而不是

功能

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}
/>

如果没有

Object.assign

，可能有一种更简洁的编写方法，但是我无法正确地测试它

编辑

这应该可以做到：

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

---

嘿，k2Snowman69，我很感激，我也尝试过指定功能，但它不起作用。我只是尝试了你的方法，没有错误，但它没有解决问题（功能仍然没有定义）：/还有其他想法吗？谢谢抱歉，离开我的电脑进入睡眠状态…看起来另一个答案让你走了很远！祝你好运！你能在这里看看吗？嘿，K2 Snowman69，我很感激，我也尝试了指定功能，但它不起作用。我只是尝试了你的方法，没有错误，但没有解决问题（功能尚未定义）：/还有其他想法吗？谢谢，对不起，离开我的电脑去睡觉了……看起来另一个答案让你走了很远！祝你好运！你能在这里放松一下吗？嘿，安迪，谢谢，我确实有理由把它复杂化（这是我正在开发的实际产品所需要的）.I还使用了

this.setState（{title:[{title:title1}，{feature:'test-2'}]}）

您可以看到的功能已指定，但仍然没有定义：/@KevinDanikowski，对我的答案进行了修改，应该会让您走上正确的道路。非常感谢您的帮助Andy！因此，有效的代码是Jayce444的代码，出于某种原因，它声明“状态未定义”当我输入你的时，我相信你已经引导我走上了更好的道路，但是Jayce的现在会起作用，非常感谢你，我真的很感激！@KevinDanikowsk，我已经在我的回答中纠正了这一点。我没有在JSFIDLE中使用

this.state

，并错误地复制了它。我添加了

这个。

以查看它是否修复了它，并且它是h但不管怎样，我相信你让我走上了正确的道路，谢谢你嘿，安迪，谢谢你，我确实有理由把它复杂化（这就是我正在开发的实际东西所需要的）。我还使用了

this.setState（{title:[{title:title1}，{feature:'test-2'}）

您可以看到的功能已指定，但仍然没有定义：/@KevinDanikowski，对我的答案进行了修改，应该会让您走上正确的道路。非常感谢您的帮助Andy！因此，有效的代码是Jayce444的代码，出于某种原因，它声明“状态未定义”当我加入你的时候，我相信你已经引导我走上了更好的道路，但是