AddItemを別のコンポーネントのリストに追加する

Question

AddItemを使用して別のコンポーネントのリストに項目を追加したいとします。しかし、私はundefinedを得続けます。

アイテムをリストに正しく追加するにはどうすればよいですか？

私はあまりにもCodeSandbox内側に入れている：https://codesandbox.io/s/Mjjrm3zrO

class App extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     movies: [x.movies], 
    }; 
    } 
    render() { 
    return (
     <div> 
     <CreateNew addItem={item => this.setState({ movie: [item].concat(this.state.movie) })} /> 
      {x.movies.map(movie => (
      <Result key={movie.id} result={movie} addItem={item => this.setState({ genres: [item].concat(this.state.genres) })} /> 
     ))} 
     </div> 
    ); 
    } 
} 

class CreateNew extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     value: '', 
     genres: '', 
    }; 
    } 
    handleSubmit1 = (e, value) => { 
    e.preventDefault(); 
    this.props.addItem(this.state.value) 
    console.log(this.props.item); 
    }; 
    onChange = e => { 
    this.setState({ value: {'name': e.target.value}, genres: [{ name: 'Test', type: 1 }, { name: 'Foo', type: 10 }] }); 
    console.log(this.state.value); 
    }; 
    render() { 
    const { value, genres } = this.props; 
    return (
     <form onSubmit={this.handleSubmit1}> 
     Add a new movie 
     <input onChange={this.onChange} type="text" /> 
     <button type="submit">Save</button> 
     </form> 
    ); 
    } 
} 

class Result extends React.Component { 
    render() { 
    const { result } = this.props; 

    return (
     <div> 
     <li> 
      {result.name} {' '} 
      ({result.genres.map(x => x.name).join(', ')}){' '} 
     </li> 

     </div> 
    ); 
    } 
} 

Answer 1

変更：

1.代わりに子コンポーネントから名前だけを送信するのには名前が含まれています全体の状態変数を送信し、ジャンル

handleSubmit1 = (e, value) => { 
    e.preventDefault(); 
    this.props.addItem(this.state) 
}; 

2.あなたは、あなたが任意の新しい項目を追加したら、状態変数を更新しているのでそう、UIを作成するために、その状態変数を使用して、JSONから状態変数に初期値のムービーを保存するので、あなたの場合されています初期jsonを使用してuiを作成すると、新しいアイテムはuiに反映されません。このような

{this.state.movies.map(movie => (
    <Result key={movie.id} result={movie} /> 
))} 

3.更新state変数映画：https://codesandbox.io/s/3nD0RgRp

：

<CreateNew addItem={item => this.setState({ movies: [{name: item.value.name, genres: item.genres}].concat(this.state.movies) })} /> 

は、実用的なソリューションをチェック