Как добавить вновь выбранные элементы в начало списка в реагировать родной?

Question

Как добавить вновь выбранные элементы в начало списка в реагировать родной?

1

В моем проекте я получаю данные json с сервера и список на card Но проблема, с которой я сталкиваюсь, заключается в том, что всякий раз, когда новый элемент добавляется в json data новый элемент будет отображаться в нижней части существующей card Хотите, чтобы он был заполнен в верхней части существующих cards как мне это сделать? Ниже приведен пример кода для извлечения и перечисления карточек. Пожалуйста, помогите мне найти решение. Любая помощь будет действительно ощутимой. Спасибо.

    componentWillMount(){

    fetch(GLOBAL.NEW_WORK_REQUEST,{
          method: 'POST',
          headers:{
            'Accept': 'application/json',
            'Content-Type': 'application/json',
          },
          body:JSON.stringify({
            name:"name"
          })
        })
        .then((response) => response.json())
        .then((responseData) =>
        {
          this.setState({
            work_rq :responseData.data
          })
        });
      }
    }
   ...
   ...
   <View>
          {this.state.work_rq.map(a => (
           <CardSection>
               <TouchableOpacity>
                   <Text style={{fontSize:18,padding:8}}>Work Category:{a.work_type}</Text>
               </TouchableOpacity>
           </CardSection>
              ))}
              </View>

anu 12 янв. 2019, в 06:12

Источник

Теги:

javascript

react-native

json

jsx

fetch

1 ответ

Ещё вопросы

Just code · Accepted Answer · 2019-01-12T03-00-00.000Z

Вы можете сделать это двумя способами

1) использовать array.reverse(), два массива не будут использоваться.

2) использовать два массива 2-й массив будет использоваться при добавлении новых данных здесь я использую 2 состояния newdata и data где newdata находится на вершине

как это, (2-й подход)

    constructor(props) {
    super(props);
    this.state = { data: [1, 2, 3], newData: [] };
  }
  handleClick() {
    var data = Math.random();
    this.setState({ newData: this.state.newData.concat(data) });
  }
  render() {
    console.log(this.state);
    return (
      <div>
        {this.state.newData && this.state.newData.reverse().map(a => {
          return <div>{a}</div>
        })}
        {this.state.data.map(a => {
          return <div>{a}</div>
        })}
        <button
          className={this.state.isToggleOn ? 'ON' : 'OFF'}
          onClick={(e) => this.handleClick(e)}>

          {this.state.isToggleOn ? 'ON' : 'OFF'}

        </button>
      </div>
    );
  }

демонстрация

При первом подходе вы можете просто сделать array.reverse и все данные будут добавлены в обратном порядке()

Так в моем случае я могу выполнить array.reverse для responseData.data ?
Вы можете, но это сделает все данные в обратном режиме
Да, это означает, что добавленный элемент будет первым элементом, верно?
Хорошо, большое спасибо за ответ :). Позвольте мне попробовать