Question

我想打印<ul>个<li>电影的新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') );列表。

我没有看到任何列表或元素。

我也收到警告：

index.js：2178警告：组件正在更改要控制的文本类型的不受控制的输入。输入元素不应从不受控制切换到受控制（或反之亦然）。决定在组件的使用寿命期间使用受控或不受控制的输入元件。更多信息：https://reactjs.org/docs/forms.html#controlled-components
     输入中的
（在index.js：54）
     标签中的
（在index.js：52）

表格（在index.js：51）
     div中的
（在index.js：50）
     电影中的
（在index.js：70）

这是我的代码：

[<span class="underline">graphic novel hero</span>](https://www.amazon.com/exec/obidos/ASIN/1596432594/braipick-20)

我真的只想打印我的收藏夹电影

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，那么组件以“不受控制”的组件开始生活。一旦您与组件交互，我们设置一个值并将其更改为a “受控”组件，并发出警告。

在您的代码中初始化您所在州的movieName以消除警告。

有关详细信息，请查看here

<ul>

2 个答案: