ReactJS - .setStateが正常に呼び出された後、他のプロパティが定義されなくなる

Question

入力ボックスとタイトルを持つアプリケーションをセットアップしました。タイトル入力はonChangeに変更され、タイトルが更新されます。状態は配列{title:[{title: 'Welcome', feature: 'test'}]を持つオブジェクトです。タイトルにsetStateが正常に機能しましたが、機能が不明になりました。 、header.jsが親で、

が

import React from "react"; 

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

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

だからメインですapp.js APP.JS：コードを参照してください。 title.jsは子供です（私が正しく理解していれば）。

がundefinedになるので、titleがnew titleであるため、変更した後。どのようなアイデアが間違っている？ componentWillUpdateを使用する必要があるかもしれませんが、私はどうしたらいいか分かりません。

Answer 1

それはあなたがだけインナーtitle財産、ないfeatureでtitle配列の卸売を交換しているsetStateときためです。あなたのヘッダーを

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

とビルド：

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

はその後の状態を設定します。あなたはこのような複雑な状態を持つための特別な理由がない限り、私はあなただけのオブジェクトを使用することによって、それはあまり問題にするべきだと思います。

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

Answer 2

設定状態を実行しているときは、残りのプロパティではなくタイトルのみを指定しているため、未定義に設定されています。

拡散操作を使用すると、この操作に役立ちます（アクセス権がある場合）。

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

そうでない場合は、状態に設定したオブジェクトに他のすべての値を含めてください。