当 state 在 React 中更新时，道具不会更新

Question

I'm passing some values from my state in the App component to the GetWordContainer component as props. With these props, I set the state in my child component. However, the state in GetWordContainer only updates once. How can I have the state in the child component continue to update when the state in App.js changes?

App.js

class App extends Component {

  state = {
    redirect: {},
    word: '',
    error: '',
    info: [],
    partOfSpeech: [],
    versions: [],
    shortdef: "",
    pronunciation: "",
  }

  setRedirect = redirect =>{{
    this.setState({redirect})
  }
  // console.log(this.state.redirect);
  console.log(this.state.word);
}
  

  handleUpdate = values => 
    this.setState({...values})
    


render() {
    return (
      <>
        <Route 
          render={ routeProps => <Redirector redirect={this.state.redirect} setRedirect={this.setRedirect} {...routeProps} />}
        />
        <header>
          <nav>
            <Link to='/'>My Dictionary</Link>
          </nav>
        </header>

        <main>
        <Route
            render = { routeProps =>
              !routeProps.location.state?.alert ? '' :
              <div>
                { routeProps.location.state.alert }
              </div>
            }
          />
          <Switch>
            <Route exact path="/" render={ routeProps => 
              <Home 
                setRedirect={this.setRedirect} 
                handleUpdate={this.handleUpdate} 
                {...routeProps} />} 
              />
            <Route exact path="/definition/:word" render={routeProps => 
              <GetWordContainer 
                setRedirect={this.setRedirect}
                handleUpdate={this.handleUpdate}
                word={this.state.word} 
                partOfSpeech={this.state.partOfSpeech}
                versions={this.state.versions}
                shortdef={this.state.shortdef}
                pronunciation={this.state.pronunciation}
                {...routeProps} />} 
              />
          </Switch>
        </main>
      </>
    );
  }
}

GetWordContainer.js

class GetWordContainer extends Component {

//this state only updates once 
state = {
  word: this.props.word,
  info: this.props.info,
  partOfSpeech: this.props.parOfSpeech,
  versions: this.props.versions,
  shortdef: this.props.shortdef,
  pronunciation: this.props.pronunciation,
}


render (){

  return (

      <div>
        <Search
          handleUpdate={this.props.handleUpdate}
          setRedirect={this.props.setRedirect}
        />
        <div>
             {this.state.word}
        </div>
        <div>
             {this.state.partOfSpeech}
        </div>
        <div>
             {this.state.versions.map((v, i) => <div key={i}>{v}</div>)}
        </div>
        <div>
             {this.state.pronunciation}
        </div>
        <div>
             {this.state.shortdef}
        </div>
      </div>
  );
  }
}

Answer 1

The issue you're facing is that the state value in the GetWordContainer component is instantiated on the initial render. There are exceptions but in general, React will reuse the same component across renders when possible. This means the component is not re-instantiated, so the state value does not change across re-renders.

One solution to this problem is to use the appropriate lifecycle method to handle when the component re-renders and update state appropriately: getDerivedStateFromProps

However, since it appears you want to render the props directly, I would recommend avoiding state entirely in GetWordContainer .

For example:

class GetWordContainer extends Component {
  render() {
    return (
      <div>
        <Search
          handleUpdate={this.props.handleUpdate}
          setRedirect={this.props.setRedirect}
        />
        <div>{this.props.word}</div>
        <div>{this.props.partOfSpeech}</div>
        <div>
          {this.props.versions.map((v, i) => (
            <div key={i}>{v}</div>
          ))}
        </div>
        <div>{this.props.pronunciation}</div>
        <div>{this.props.shortdef}</div>
      </div>
    );
  }
}

Answer 2

Your constructor lifecycle method runs only once - during the initialisation of the component. If you are expecting new data from parent component, you can re-render your child by using componentDidUpdate() or getDerivedStateFromProps .

componentDidUpdate(prevProps) {
  if (prevProps.word || this.props.word) {
   this.setState({
     word
   })
  }
}

I notice that your child component is not manipulating the props, it is just a display-only container. Why don't you just pass the props and display it directly rather than taking the longest route? Your child component can be a functional component:

const GetWordContainer = (props) => {
  return (
      <div>
        <Search
          handleUpdate={props.handleUpdate}
          setRedirect={props.setRedirect}
        />
        <div>
             {props.word}
        </div>
        <div>
             {props.partOfSpeech}
        </div>
        <div>
             {props.versions.map((v, i) => <div key={i}>{v}</div>)}
        </div>
        <div>
             {props.pronunciation}
        </div>
        <div>
             {props.shortdef}
        </div>
      </div>
  );
}