Обновление реквизита (или состояния) во входах, сопоставленных с массивом объектов с помощью React - PullRequest
Новая
       5

Обновление реквизита (или состояния) во входах, сопоставленных с массивом объектов с помощью React

0 голосов
/ 14 января 2020

У меня есть массив объектов, который я выводил в виде входных данных. Эти входные данные должны быть обновлены, значения представлены для отображения изменений. Я могу утешить ключ и новое значение, но получаю ошибку: metafields.map не является функцией.

Мой код выглядит следующим образом: 

class EditMetafields extends React.Component {
  constructor(props) {
    super(props);
    this.state = { metafields: [] }
  }

  componentDidMount() {
    // retrieving data from the db to populate metafields
    metafields = [
      {id: 0, key: "key0", value: "value0"},
      {id: null, key: "keyNull", value: "valueNull"},
      {id: 2, key: "key2", value: "value2"},
    ]

    this.setState({ metafields: metafields });
  }

  render() {
    const { metafields } = this.state;
    const formFields = metafields.map((props) => 
      <TextField 
        key={props.id} 
        label={props.key} 
        id={prop.id} 
        value={props.value} 
        changeKey={props.id} onChange={(val) =>{
          console.log(props.key, val); //returns accurate output i.e. "key0 value0a" when 'a' key pressed
          this.setState({ metafields: { ...this.state.metafields, [props.key]: val } }) //TypeError: metafields.map is not a function after 'a' key pressed
        }
      } />
    );

    return (
     <Page>
       <Form>
         {formFields}
       </Form>
     </Page>
    )
  }
}

Когда это было массив объектов, содержащий одну пару ключ / значение, которую я смог соединить и изменить без проблем, но теперь, когда мне нужно присоединить идентификаторы и многое другое к объекту, React расстраивается из-за Objects are not valid as a React child. If you meant to render a collection of children, use an array instead.

Мне нужно работать с объектами, содержащими идентификатор, пространство имен, ключ и значение, и выводить каждый объект на вход в форме, которую можно обновить, но я не уверен, правильно ли я использую React, назначая мета-поля реквизитам. Ссылки на соответствующие статьи или точки в правильном направлении будет высоко ценится!

1 Ответ

1 голос
/ 14 января 2020

Как упоминал Брайан, эта строка: 

this.setState({ metafields: { ...this.state.metafields, [props.key]: val } })

изменяет переменную состояния metafields на объект. Я думаю, что вы пытаетесь сделать, это обновить значение элемента в массиве metafields на основе ключа.

Чтобы выполнить sh, вы должны использовать map и использовать вариант обратного вызова setState (поскольку вы зависите от предыдущего состояния metafields): 

this.setState(prevState => {
    return { metafields: prevState.metafields.map(metafield => {
        if (metafield.key === props.key) {
            metafield.value = val;
        }
        return metafield;
    })};
});

Этот код обновит правильный элемент в массиве metafields с новым значением.

...