Приложение React: реквизиты не обновляются извне - PullRequest
Новая
       12

Приложение React: реквизиты не обновляются извне

0 голосов
/ 26 апреля 2019

У меня есть приложение React, которое инициализируется так же просто, как: 

let globalTodos = some_fetch_from_localstorage();

...

function changeGlobalTodos() {
  globalTodos = another_fetch_from_localstorage();
}

...

ReactDOM.render(<ReactApp todos={globalTodos} />, document.getElementById('app'));

Внутри приложения я делаю следующее: 

constructor(props) {
  super(props);
  this.state = {
    todos: []
  };
}

static getDerivedStateFromProps(nextProps, prevState) {
  if (nextProps.todos !== prevState.todos) {
    return { todos: nextProps.todos };
  } else return null;
}

componentDidUpdate(prevProps, prevState) {
  if (prevProps.todos !== this.props.todos) {
    this.setState({ todos: this.props.todos });
  }
}

Проблема в том, что всякий раз, когда я обновляю globalTodos, реквизиты в приложении React не обновляются: оно остается на начальном значении globalTodos.

Я пытался играть с getDerivedStateFromProps, вызывается только при первой установке реквизита, в то время как componentDidUpdate никогда не вызывается: - /

Что мне здесь не хватает?

1 Ответ

0 голосов
/ 27 апреля 2019

Я не могу оставить комментарий, поэтому я просто опубликую это здесь.React не выполнит повторную визуализацию, если вы не обновляете состояние.

Я бы сделал globalTodos состоянием и добавил бы его оттуда с помощью setState, а затем вы можете передать его в качестве опоры дочернему компоненту.в вашем случае ReactApp.Вам не нужно изменять их как состояния в вашем дочернем компоненте.

Пример: 

class Parent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            globalTodos: initialFetchedArray
        };
    }

    changeGlobalTodos() {
        let newTodos = fetchNewArray;
        this.setState({globalTodos: newTodos});
    }

    ReactDOM.render(<ReactApp todos={globalTodos} />, document.getElementById('app'));
}

//You just need your prop here, here you can do whatever you want to do with the array if it's display you can use map
class Child extends Component {
    render {
        return(
         {this.props.todos}
        )
    }
}

На самом деле главное здесь - сделать ваш globalTodos состоянием, используя setState, чтобы изменить это состояние.и просто передавая это состояние как опору.

...