为什么received状态一会就消失了？

Question

我正在尝试从 TestClass 调度 actionC，以便 Labelclass 可以接收来自 reducer 的状态更改，如下所示。

测试类

class Test extends React.Component {
  constructor(props){
    super(props)

    this.state = {text:props.text,onClick:props.onClick}
    this.onInput = this.onInput.bind(this)
    this.onSubmit = this.onSubmit.bind(this)
  }
  onInput(e){
    this.setState({text:e.target.value})

  }
  onSubmit(e){
    this.state.onClick(this.state.text)
  }
  render(){
    return <div>
      <form onSubmit={this.onSubmit}>
      <input value={this.state.text} onChange={this.onInput} />
      <button type="submit">Add Todo</button>
      </form>
      </div>

  }
}

function mapDispatchToProps_Test(dispatch,ownProps){
 return {onClick:(id)=>dispatch(actionC(id))}
  }
Test.propTypes = {
  text:PropTypes.string.isRequired,
  onClick:PropTypes.func.isRequired
}
 Test = connect(null,mapDispatchToProps_Test)(Test)

LabelClass 和条目

class Label extends React.Component {
  constructor(props){
    super(props)
    this.state = {text:props.text}
  }
  render(){
    return <div> Hello<label>{this.props.text}</label></div>
  }

}
function mapStateToProps_Label(state,ownProps){
  return {
      text:state.text
    }
  }
 Label = connect(mapStateToProps_Label)(Label)
Label.propTypes = {
  text:PropTypes.string.isRequired

}

const App = () =>(
 <div>
    <Test text="" onSubmit onClick />
    <Label text=""/>
  </div>

)

ReactDOM.render(
    <Provider store={store}><App /></Provider>,
    document.getElementById('root')
  );

Action 和 Reducer

const CDD_TODO = 'CDD_TODO'
const {PropTypes} = React;
const {createStore} = Redux;
const { Provider, connect } = ReactRedux;
let store = createStore(reducer)
//action
function actionC(text) {
  console.log(CDD_TODO)
  return { type: CDD_TODO, text:text }
}

function reducer(state = {}, action) {
  switch (action.type) {
    case CDD_TODO:
      console.log("action",action.text)
      return Object.assign({}, state, {
        text:action.text
      })
    default:
      return state
  }
}

问题是 LabelClass render() 的输出立即变得不可见片刻后显示.

我希望它不要消失。是什么原因？

Answer 1

您没有从您创建的减速器中映射值 text，而是您自己映射了减速器。在您的情况下，您必须从名为 text:

的减速器映射 text 值

function mapStateToProps_Label(state,ownProps){
  // state.text is the state of your reducer
  // state.text.text is one of the state value
  return {
    text:state.text.text
  }
}

此外，据我所知，您不需要Label中的状态：

class Label extends React.Component {
  render(){
    return <div> Hello<label>{this.props.text}</label></div>
  }
}

在 Test 中同样如此：onClick 在 this.state 中是无用的：

class Test extends React.Component {
    constructor(props) {
        super(props);

        this.state = { text: props.text }
        this.onInput = this.onInput.bind(this)
        this.onSubmit = this.onSubmit.bind(this)
    }
    onInput(e) {
        this.setState({ text: e.target.value });

    }
    onSubmit(e) {
        this.props.onClick(this.state.text);
    }
    render() {
        return <div>
            <form onSubmit={this.onSubmit}>
                <input value={this.state.text} onChange={this.onInput} />
                <button type="submit">Add Todo</button>
            </form>
        </div>;
    }
}

我觉得你应该在mapStateToProps下个断点，看看text设置后是否修改了。您应该在 reducer 中放置一个断点，以查看某个动作是否分派了一个擦除文本数据的动作。

为什么received状态一会就消失了？

Why does the received state disappear in a moment?

reactjs

redux

reducers