setState и значок не работают вместе - React Native - PullRequest
Новая
       19

setState и значок не работают вместе - React Native

0 голосов
/ 28 мая 2020

В моем приложении React Native у меня есть простой FlatList. Элемент визуализации Flatlist - это компонент SearchItem. js. Мне нужно повторно инициализировать состояние внутри этого компонента каждый раз, когда вызывается мой компонент.

Flatlist 

                       <FlatList
                        ListFooterComponent={<View style={{ paddingBottom: 30 }}></View>}
                        data={temp}
                        keyExtractor={(item) => item.id}
                        renderItem={this.renderItem.bind(this)}    //SearchItem component                    
                        />

элемент рендеринга: 

renderItem({item}) {

              return <SearchItem item={item}
                            onPress={() => {this.goToDetails(item)} 
                      ]  /> ;
            }

Щелкните значок стрелки вниз, и сообщение развернется. щелкните «^», и он свернется.

Компонент SearchItem ниже. Здесь состояние "arrowClicked" должно быть ложным каждый раз при вызове компонента. Если щелкнуть значок стрелки и развернуть сообщение, состояние станет «истинным». Как мне повторно инициализировать мое состояние на «ложь» каждый раз при вызове компонента. В настоящее время, если сообщение развернуто, оно остается развернутым. Он должен автоматически свернуться при повторном вызове компонента. 

export default class SearchItem extends Component {

constructor(props) {
    super(props)

    this.state = {
     arrowClicked: false
    }
   }

setFullLength(bool){
    this.setState({
      arrowClicked: bool
    })
  }
.
.
render(){

return (

    {
      arrowClicked === true ? 
     <Icon type='materialicons' name='keyboard-arrow-up' onPress={()=>{this.setFullLength(false)}}  />
          : 
     <Icon type='materialicons' name='keyboard-arrow-down' onPress={()=>{this.setFullLength(true)}}  />

      }

 )
}

Как мне повторно инициализировать мое состояние arrowClicked = "false" ???? Помогите пожалуйста !!!

Обновление: Вообще-то странно !!

Пример: представьте, что я ищу "привет" и 2 элемента в моем рендере плоского списка. Я щелкаю значок стрелки в одном из своих сообщений, и сообщение расширяется. Теперь я очищаю текст «привет» в моей SearchBar. Flatlist снова отображается, и отображаются все элементы. Мое сообщение все еще развернуто (состояние: истина). Теперь я ищу еще один текст «привет» и два очень разных элемента в моем рендере плоского списка. Я очищаю поисковый текст "привет". Flatlist снова отображается. Теперь мое ранее развернутое сообщение свернуто (состояние вернулось к ложному). Как??????? Проблема в фокусе ??????

Ответы [ 2 ]

0 голосов
/ 28 мая 2020

Хорошо, решение состоит в том, чтобы добавить Key , поскольку это Functional Comp, а не Pure. Я просто добавил ключ к родительскому элементу моего FlatList, и он сработал !!!

0 голосов
/ 28 мая 2020

нужно вызвать стрелку Clicked from state; 

render() {
const { arrowClicked  } = this.state;
const icon1 = <Icon type='materialicons' name='keyboard-arrow-up' onPress={()=>{this.setFullLength(false)}}  />;
const icon2 = <Icon type='materialicons' name='keyboard-arrow-down' onPress={()=>{this.setFullLength(true)}}  />;
return (
    <Fragment>
      {arrowClicked ? icon1 : icon2}
    </Fragment>
 )
}
...