Как использовать setState для соединения в массив в состоянии? - PullRequest
Новая
       0

Как использовать setState для соединения в массив в состоянии?

3 голосов
/ 23 октября 2019

Мой файл state.events находится в массиве, который состоит из экземпляра компонента: EventContainer.

Я хочу, чтобы мой setState поместил новый EventContainer в массив state.events. Тем не менее, я хочу, чтобы EventContainer входил в индекс сразу после конкретного EventContainer, который сделал вызов setState.

Мне нужна помощь с внесением корректировок, необходимых для моего подхода или, если весь мой подход плохойрекомендация о том, как это сделать. Большое спасибо.

Я разрабатываю конструктор маршрутов, который состоит из строк / EventContainers, которые представляют деятельность за определенный день.

У каждого EventContainer есть кнопка, которую нужно предложитьпользователь имеет возможность onClick дополнительной строки сразу после этого EventContainer. 

class DayContainer extends React.Component {
  constructor(props){
    super(props);

    this.state = {
      events: [],

    };

    this.pushNewEventContainerToState = this.pushNewEventContainerToState.bind(this);
  }




    pushNewEventContainerToState (index){
       let newEvent = <EventContainer />;
       this.setState(prevState => {
         const events = prevState.events.map((item, j) => {
           if (j === index) {
             events: [...prevState.events.splice(index, 0, newEvent)]
            }
          })
        })
      }




  render(){
    return (
        <>
          <div>
              <ul>
                  {
                    this.state.events === null
                    ? <EventContainer pushNewEventContainerToState= . 
 {this.pushNewEventContainerToState} />
                    : <NewEventButton pushNewEventContainerToState={this.pushNewEventContainerToState} />
                  }




                  {this.state.events.map((item, index) => (
                    <li
                        key={item}
                        onClick={() => 
 this.pushNewEventContainerToState(index)}
                    >{item}</li>
                  ))}

              </ul>

        </div>
      </>
    )
  }
}

Моя цель в setState состояла в том, чтобы соединить newEvent в this.state.events сразу после индекса (параметр в функции pushNewEventContainerToState).

Я получаю эту ошибку, но я предполагаю, что происходит нечто большее, чем просто: Строка 23:22: ожидал вызова присваивания или функции и вместо этого увидел выражение no-unused-expression.

Ответы [ 2 ]

2 голосов
/ 23 октября 2019

Я вижу как минимум 2 проблемы с кодом. - Splice изменяет массив на месте - Вы не возвращаете обновленное состояние.

Вместо этого вы можете использовать slice для создания нового массива. 

pushNewEventContainerToState(index) {
  let newEvent = < EventContainer / > ;

  this.setState(prevState => {
    const updatedEvents = [...prevState.events.slice(0, index], newEvent, ...prevState.events.slice(index + 1];

      return {
        events: updatedEvents
      })
  })
}
0 голосов
/ 24 октября 2019

Поскольку я довольно новичок в кодировании, мне потребовалось некоторое время, но я смог составить полный ответ. Вот код ниже. Ниже я объясню, точка за точкой, в чем проблема и как обновленный код решает эту проблему. 

class DayContainer extends React.Component {
  constructor(props){
    super(props);

    this.state = {
      events: [{key:0}],

    };

    this.pushNewEventContainerToState = this.pushNewEventContainerToState.bind(this);
  }


      pushNewEventContainerToState(index) {
        let newEvent = {key: this.state.events.length};

        this.setState(prevState => {
          let updatedEvents = [...prevState.events.slice(0, index + 1), newEvent, ...prevState.events.slice(index + 1)];

            return {
              events: updatedEvents
            };
          })
        }

  render(){
    return (
        <>
          <div>
              <ul>
                  {this.state.events.map((item, index) => (
                    <li key={item.key}>
                        < EventContainer pushNewEventContainerToState={() => this.pushNewEventContainerToState(index) } / >
                    </li>
                  ))}

              </ul>
          </div>
        </>
    )
  }
}

Настройка

  1. Начиная с state.events , вместо того, чтобы начинать с пустого массива, я начинаю с одного объекта , включая ключ, начинающийся с 0, потому что я всегда хочу, чтобы пользователь начинал содин EventContainer.

  2. Что касается pushNewEventContainerToState , @Sushanth дал отличную рекомендацию. Пожалуйста, обратитесь непосредственно к этой функции в моем последнем коде. Уточнение, которое я сделал, связано с тем, как я разделяю EventContainer, передаваемый this.state.events. Я переместил EventContainer из pushNewEventContainerToState вниз в элемент render (). Я дал ему опору key = {item.key} и обернул экземпляр компонента в li. Самый первый EventContainer будет иметь ключ 0 (см. State.events [0]). Теперь каждый новый EventContainer, передаваемый в state.events, будет иметь ключ, основанный на последнем .length () массива state.events (см. Последнее значение переменной let newEvent в pushNewEventContainerToState).

Все это позволило мне решить большую проблему, с которой я столкнулся: мне нужно было поместить новейший EventContainer в индекс сразу после индекса EventContainer, вызывающего pushNewEventContainerToState . Основная причина этого состояла в том, что я неправильно передавал индекс EventContainer внутри render (). Теперь, когда у меня есть настоящий EventContainer, я могу правильно передать ему опору (пожалуйста, обратитесь к опоре EventContainer при рендере). Теперь я вызываю pushNewEventContainerToState с правильным индексом.

...