Question

所以我现在正在做的是创建一个表单，该表单将一个请求发送到后端，然后返回调度一个动作并设置一个状态。

基本上是公司信息，我必须在整个表单中使用它，该表单可以填充来自后端的数据，但这是一回事；

我有一个父元素，其中我要传递[state，setState]作为属性，在子元素中，我正在使用setState，并且在ReduxDevTool中进行检查时，它们的运行都很好。问题在于，当我在下一步中访问相同状态时，由于useState是具有空键的对象，因此无法接收任何数据，并且在进一步的表单步骤中并不是很有用。

我已经尝试接触文档并检查是否应该使用诸如getDerivedStateFromProps之类的功能，但是在带有打字稿的React.FC中，事情并非如此简单，或者是我对此事缺乏经验

一些伪代码：

App(){
  [state,setState] = useState({name:'', regon:'', phone:''})
  return(
    <div>
      <SomeComponent state={state} stateSetter={setState} />
      <SomeOtherComponent useGlobalState={state}/>
    </div>
  )
}
SomeComponent ({state, stateSetter}){
  <input 
    onChange={e=>{
      stateSetter((previousState)=>({...previousState, numberOne:{
        ...previousState.numberOne: e.target.value
      }}))}
    }
  >
}
SomeOtherComponent ({useGlobalState}){
  return <div>{useGlobalState.numberOne}</div>
}

我希望表单使用从后端派生的新状态，但它所记住的只是最后调度的动作输出（这不是最新的动作输出，而是在状态方面落后了一步）。

Answer 1

这是固定代码。

App(){
  const [state,setState] = useState({name:'', regon:'', phone:''}) //add const
  return(
    <div>
      <SomeComponent state={state} stateSetter={setState} />
      <SomeOtherComponent useGlobalState={state}/>
    </div>
  )
}
SomeComponent ({state, stateSetter}){
  <input 
    name="name"
    onChange={e=>{
      stateSetter({...state, numberOne:{...state.numberOne, [e.target.name]: e.target.value}}) // set object key, and put the variable to the stateSetter's argument, not function.
    }
  >
}
SomeOtherComponent ({useGlobalState}){
  return <div>{useGlobalState.numberOne}</div>
}

这是一个例子

class Component1 extends React.Component {
  render(){
    const { handleChange } = this.props;
    return(
        <input style={{border: '1px solid red', width: '100%'}} onChange={handleChange} />
    );
  }
}
class Component2 extends React.Component {
  render(){
    const { value } = this.props;
    return(
        <div style={{border: '1px solid red', width: '100%', height: 30}} >{value}</div>
    );
  }
}
class Application extends React.Component {
  state = {
    value: '',
  };
  
  handleChange = (e) => {
    this.setState({value: e.target.value});
  }
  
  render(){
    const { value } = this.state;
    return(
      <div style={{border: '1px solid red', height: 100}}>
        <Component1 handleChange={this.handleChange}/>
        <Component2 value={value}/>
      </div>
    );
  }
}
React.render(<Application />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js"></script>
<div id="app"></div>

子组件中的React.FC setState不会更新视图

1 个答案: