Печать списка в <ul>

Question

Я хочу напечатать новый <ul> список <li> фильмов.

Я не вижу ни списка, ни элементов.

Я также получаю предупреждение:

index.js: 2178 Предупреждение: компонент изменяет неконтролируемый ввод текста типа для управления.Входные элементы не должны переключаться с неуправляемых на управляемые (или наоборот).Выберите между использованием контролируемого или неконтролируемого элемента ввода в течение срока службы компонента.Дополнительная информация: https://reactjs.org/docs/forms.html#controlled-components

на входе (в index.js: 54)

в метке (в index.js: 52)

в форме (в индексе.js: 51)

в div (в index.js: 50)

в фильме (в index.js: 70)

Это мой код:

class Movie extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: '',
                  list: [],
                  checked: true
                 };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.addMovie = this.addMovie.bind(this);
    this.listMovies = this.listMovies.bind(this);
  }

  handleChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });

  }

  handleSubmit(event) {
    event.preventDefault();
    this.addMovie();
  }

  addMovie(value){
    this.setState({ list: [...this.state.list, value] });
    console.log(...this.state.list);
  }

  listMovies(){
    return(
      <ul>
        {this.state.list.map((item) => <li key={this.state.value}>{this.state.value}</li>)}
      </ul>
    );
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            Movie name:
            <input name="movieName" type="text" value={this.state.movieName} onChange={this.handleChange} />
            Favorite?
            <input name="favorite" type="checkbox" checked={this.state.favorite} onChange={this.handleChange} />
          </label>
          <input type="submit" value="Submit" />
        </form>

        <button onClick={this.listMovies}>
          List Movies
        </button>
      </div>
    );
  }
}

ReactDOM.render(
  <Movie />,
  document.getElementById('root')
);

Мне бы очень хотелось распечатать только мои избранные фильмы

Answer 1

Полагаю, вы хотите простой список фильмов с избранным.Не самый лучший, но рабочий код:

import React from 'react';
import { render } from 'react-dom';

class App extends React.Component {
     state = {
      favorite: false,
      movieName: "",
      movies: [],
      filter: true,
    };

  handleChange = (event) =>
    event.target.name === "favorite"
      ? this.setState({ [event.target.name]: event.target.checked })
      : this.setState( { [ event.target.name]: event.target.value } );

  handleSubmit = ( event ) => {
    event.preventDefault();
    this.setState({
      movies: [...this.state.movies, {name: this.state.movieName, favorite: this.state.favorite }]
    });
  }

  listFavoriteMovies = () => (
      <ul>
        {this.state.movies
        .filter( movie => movie.favorite )
        .map( movie => <li>{movie.name}</li>)}
      </ul>
    );

    listAllMovies = () => (
      <ul>
        {this.state.movies
          .map(movie => <li>{movie.name}</li>)}
      </ul>
    );

  changeFilter = () =>
    this.setState( prevState => ( {
      filter: !prevState.filter,
    }))


  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            Movie name:
            <input name="movieName" type="text" onChange={this.handleChange} />
            Favorite?
            <input name="favorite" type="checkbox" onChange={this.handleChange} />
          </label>
          <input type="submit" value="Submit" />
        </form>
        <p>Showing only favorite movies.</p>
        <ul>
          {
            this.state.filter
            ? this.listFavoriteMovies()
            : this.listAllMovies()
            }
        </ul>
        <button onClick={this.changeFilter}>Click toggle for all/favorites.</button>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

Answer 2

если изначально передать значение undefined или null в качестве значения prop, компонент начинает жизнь как «неуправляемый» компонент.Как только вы взаимодействуете с компонентом, мы устанавливаем значение и реагируем, меняем его на «управляемый» компонент и выдаем предупреждение.

В вашем коде инициализируйте movieName в вашем состоянии, чтобы избавиться от предупреждения.

Для получения дополнительной информации проверьте здесь