Question

我试图从TestClass调度actionC，以便Labelclass可以从reducer接收状态更改，如下所示。

识别TestClass

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')
  );

动作和减速器

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

您没有从您创建的reducer中映射值0，但是您自己映射了reducer。在您的情况下，您必须映射名为text的reducer中的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是否在设置后被修改了。您应该在reducer中放置一个断点，以查看某个操作是否会调度删除文本数据的操作。

为什么收到的状态片刻消失？

1 个答案: