Javascript 对象作为React子对象无效，Redux

我有一个React

Movie

类，允许您输入

movieName

。您还可以查看您输入的所有电影

我现在正在用Redux更新我的应用程序，但当我想显示列表时遇到了问题

以下是在React中已经起作用的内容：

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.addMovie();
  }

  addMovie = () =>{
    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>
        <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'));

及

---

?？如何操作？

由于您使用的是redux，您应该将react组件与redux连接，以便访问redux状态，即redux中的应用程序级电影状态。 您的顶级js（app.js）还应该实现store provider来保存应用程序状态

您应该尝试将应用程序状态映射到props（mapStateToProps），并将元素设置为从props映射状态

你可以提供一些好的参考资料

希望能有帮助

您不能分派到JSX。 Dispatch用于向redux发送信息，在redux中由还原程序和中间件捕获信息，并返回将存储在redux中的数据。因此，在JSX中调度某些内容（在渲染返回内部）将导致错误

我不知道如何返回reducer函数中的状态 Reducer与JSX无关。Reducer返回将存储在存储中的不可变状态值。在使用

connect（）

将组件连接到存储区后，只能使用

this.props.state\u variable\u name

从存储区访问这些数据

我是否应该在函数中应用ReduxRedux可以被视为应用程序的临时存储区，在这里您有侦听器（您的组件）侦听这些数据对象中的更改

---

我想说的是，你应该听这篇文章来简单地了解redux，这是一个非常简单的概念

不要将React方式与Redux方式混合使用。您以错误的方式使用分派，并尝试将其与渲染混合。如果你是个新手，不能做出反应，就多玩一点反应吧。然后，在掌握React之后，在尝试编写一些东西之前，请遵循Redux文档和一些教程。我可以在这里为您编写一些Redux代码，就像我以前为React编写的一样，但这对您不好。我是作为像你这样的学习者说的。我对React和Redux不是很有经验，但我已经按照我告诉你的那样学会了一切。

listAllMovies = () => (//
  <ul>
      {this.props.dispatch({ type: 'LIST_ALL_MOVIES' })}
  </ul>
);

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

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