javascript - React 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. 您正在将电影的初始值从 json 存储到状态变量，因此使用该状态变量来创建 ui，因为一旦添加任何新项目，您就会更新状态变量，因此如果您使用初始 json 来创建 ui，然后新项目将不会反射(reflect)在 ui 中。

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

3.更新state变量movies，如下所示:

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

检查工作解决方案:https://codesandbox.io/s/3nD0RgRp