我正在尝试使用 React-Redux 制作一个简单的网站，以练习使用 React 和 Redux 并将它们连接起来。整个 HTML 只是一个带有 id="container"的 div，用于在代码末尾接收来自 ReactDOM.render 的最终组件。
// Redux
const defaultState = {
input: ""
}
const updateView = (event) => {
return {
type: "UPDATE",
input: event.target.value
}
}
const reducer = (state = defaultState, action) => {
switch(action.type) {
case "UPDATE":
return {
input: action.input
}
default:
return state
}
}
const store = Redux.createStore(reducer);
// React Redux
const connect = ReactRedux.connect;
const Provider = ReactRedux.Provider;
// React
class Presentational extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
dispatch(this.props.submitUpdate(event));
}
render() {
return (
<div>
<textarea cols="40" rows="10" value={this.props.input} onChange={this.handleChange}/>
<div id="preview"></div>
</div>
)
}
}
const mapStateToProps = (state) => {
return {
input: state.input
}
}
const mapDispatchToProps = (dispatch) => {
return {
submitUpdate: function(event) {
dispatch(updateView(event));
}
}
}
const Container = connect(mapStateToProps, mapDispatchToProps)(Presentational);
class App extends React.Component {
constructor(props) {
super(props)
}
render() {
<Provider store={store}>
<Container/>
</Provider>
}
}
ReactDOM.render(<App />, document.getElementById("container"));
我最终希望它成为一个 Markdown 预览器，但现在我希望它能够渲染一个我可以输入的文本区域，并且在幕后它应该更改状态的输入属性，以便我稍后可以访问它。相反，它不渲染任何内容并抛出:
[object Error] {
framesToPop: 1,
name: "Invariant Violation"
}
最佳答案
问题出在您的 App 组件中。您错过了那里的返回，因此渲染方法默认返回未定义，这就是您看到的错误的原因。另一个修复方法是删除 dispatch，一旦修复 App 组件中缺少的返回，它就会给您带来运行时错误。
更正的App组件为:
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Provider store={store}>
<Container />
</Provider>
);
}
}
并且dispatch(this.props.submitUpdate(event));应该是Presentational内的this.props.submitUpdate(event); > 组件 handleChange 方法。
完整的工作代码:
index.js
// Redux
const defaultState = {
input: ""
};
const updateView = event => {
return {
type: "UPDATE",
input: event.target.value
};
};
const reducer = (state = defaultState, action) => {
switch (action.type) {
case "UPDATE":
return {
input: action.input
};
default:
return state;
}
};
const store = Redux.createStore(reducer);
// React Redux
const connect = ReactRedux.connect;
const Provider = ReactRedux.Provider;
// React
class Presentational extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.props.submitUpdate(event);
}
render() {
return (
<div>
<textarea
cols="40"
rows="10"
value={this.props.input}
onChange={this.handleChange}
/>
<div id="preview" />
</div>
);
}
}
const mapStateToProps = state => {
return {
input: state.input
};
};
const mapDispatchToProps = dispatch => {
return {
submitUpdate: function(event) {
dispatch(updateView(event));
}
};
};
const Container = connect(
mapStateToProps,
mapDispatchToProps
)(Presentational);
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Provider store={store}>
<Container />
</Provider>
);
}
}
ReactDOM.render(<App />, document.getElementById("container"));
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script
crossorigin
src="https://unpkg.com/react@16/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
></script>
<script src="https://unpkg.com/react-redux@6.0.0/dist/react-redux.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script src="https://unpkg.com/redux@4.0.1/dist/redux.js"></script>
<title>Document</title>
</head>
<body>
<div id="container"></div>
<script type="text/babel" src="index.js"></script>
</body>
</html>
关于javascript - 如何修复 React 中的 "Invariant violation"错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54726641/