React.FC setState в дочернем компоненте не обновляет представление - PullRequest
Новая
       40

React.FC setState в дочернем компоненте не обновляет представление

0 голосов
/ 25 сентября 2019

Итак, я сейчас создаю форму, которая отправляет запрос бэкэнду и возвращается с отправкой действия и установкой состояния.

В основном это информация о компании, и я должен использовать ее по всей форме, которая может быть заполнена данными из бэкэнда, но есть одна вещь;

У меня есть родительский элемент, в который я передаю[состояние, 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>
}

Я бы хотел, чтобы моя форма использовала новое состояние, полученное из бэкэнда, но все, что он помнит, это последний отправленный вывод действия (который не является новейшим, а скорее однимшаг назад с точки зрения состояния).

1 Ответ

0 голосов
/ 25 сентября 2019

здесь фиксированный код. 

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