爲什麼收到的狀態片刻消失？

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 
    } 
} 

的特魯ble是來自LabelClass的輸出render（）在瞬間顯示在之後變爲不可見 。

我希望它不會消失。原因是什麼？

Answer 1

您沒有映射您創建的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>; 
    } 
} 

我想你應該把一個breakpo int在mapStateToProps中查看text在設置後是否修改。您應該在縮減器中放置一個斷點，以查看動作是否調度刪除文本數據的操作。