React.js дочернее состояние не перерисовывается даже после вызова setState?

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

Изменение состояния всегда вызывает повторную визуализацию в React. Единственная проблема заключается в том, что ваш дочерний компонент управляет своим собственным состоянием, которое не изменяется напрямую. Вместо этого он просто снова и снова получает новые реквизиты, но ничего с ними не делает.

Если вы посмотрите на свой код для компонента <Book />, вы измените его состояние только на componentDidMount, что происходит только один раз. Если вы хотите программно обновить его, вы можете сделать одну из двух вещей.

1. Удалите состояние из дочернего компонента и сделайте так, чтобы он полностью полагался на реквизиты, чтобы он оставался синхронизированным с родительским
2. Используйте метод жизненного цикла componentDidUpdate ( docs ]) выбрать, когда нужно изменить состояние ребенка (что вызовет повторную визуализацию)

Может быть, вы ищете что-то похожее на это? https://stackblitz.com/edit/react-snoqkt?file=index.js

Приведенный выше код можно упростить и упорядочить, но он дает некоторое представление.

Основные изменения в коде.

1. Изменен вызов Api с события жизненного цикла componentDidMount на новый метод с именем getInitialdata, который вызывается в handleSubmit.

   getInitialdata(name){
    axios.get(`https://www.googleapis.com/books/v1/volumes?q=${name}`)
     .then((response) => {
       const bookExample1 = response.data.items;
       console.log(bookExample1);
       this.setState({bookTitles: bookExample1, isLoading: false, bookSubmitted: 'userSub'});
     })
     .catch((error) => {
       console.error('ERROR!', error);
       this.setState({isLoading: false, bookSubmitted: 'userSub'});
     });
   

   }

2. Изменен способ использования дочернего компонента.

   <Book bookTitles={this.state.bookTitles} isLoading={this.state.isLoading}/>
   

Проблема с вашим кодом заключается в том, что вы выполняете вызов API в методе didMount вашего компонента. Это событие жизненного цикла будет вызываться только при монтировании компонента. Не когда он обновляется. Когда вы вводите какие-либо данные в текстовое поле и нажимаете «Поиск книг», событие componentDidMount не запускается. И это причина того, что вызовы API не происходят со второго раза.

Подробнее о событиях жизненного цикла см. На сайте https://reactjs.org/docs/react-component.html#componentdidmount