Question

我有一个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却从未被调用过：-/

我在这里想念什么？

Answer 1

我不能发表评论，所以我只在这里发表。除非您要更新状态，否则React不会重新渲染。

我将globalTodos设置为一个状态，并使用setState从那里添加到状态，然后可以将它作为道具传递给您的案例ReactApp的子组件。您无需在子组件中将它们更改为状态。

示例：

#include <stdio.h> 
#include <stdlib.h>

void bq(int* v, int s, int e);

int main(void){
  int* v;
  for(int i = 10; i <= 30; i = i + 10){
    v = (int*) malloc (i*sizeof(int));
    for(int j = 0; j < i; j++)
        v[j] = j;
    bq(v, 0, i-1);
    for (int k = 0; k < i; k++){
        printf("%d ", v[k]);
    }
    free(v);
    printf("\n");
  }
  return 0;
}

void bq(int* v, int s, int e){
  if (e+s+1 > 2){
    int m = (e+s+1) / 2;
    bq(v, m+1, e);
    bq(v, s, m-1);
    int aux = v[e];
    v[e] = v[m];
    v[m] = aux;
  } 
}

真正的主要目的是使您的globalTodos成为一个状态，使用setState更改该状态，然后将该状态作为道具向下传递。

React应用程序：道具不会在外部进行更新

1 个答案: