Как я могу обновить состояние путем фильтрации выбранных данных?

Question

Привет, ребята, я пытаюсь получить данные из моей БД, которая выглядит следующим образом:

inputData: {
  formID: '',
  inputArr: [],
  labelArr: []
}

но я хочу поместить только определенную строку formID внутри состояния, в основном отфильтровать их, как я могу сделатьчто?

это мой код извлечения

componentWillMount() {
  fetch('/api/datas')
    .then(data => data.json())
    .then(datas =>
      this.setState(state => ({ inputDataArr: [state.inputDataArr, ...datas] }))
    );
}

state = {
  inputDataArr: []

};

, и я хочу подсунуть только те, кто с formID 3, например, был бы признателен за помощь!

Answer 1

Вы можете filter datas перед обновлением своего состояния.Вот рабочий пример.

const datas = [
  {
    formID: '3',
    inputArr: ["foo"],
    labelArr: ["foo"]
  },
  {
    formID: '4',
    inputArr: ["bar"],
    labelArr: ["bar"]
  },
  {
    formID: '3',
    inputArr: ["baz"],
    labelArr: ["baz"]
  },
];

const fakeRequest = () =>
  new Promise(resolve => setTimeout(() => resolve(datas), 1000));

class App extends React.Component {
  state = {
    inputDataArr: [],
  }

  componentDidMount() {
    fakeRequest()
      .then( datas => {
        const filterdDatas = datas.filter( data => data.formID === "3");
        this.setState( currentState => ({
          inputDataArr: [ ...currentState.inputDataArr, ...filterdDatas ]
        }))
      })
  }
  render() {
    console.log( this.state );
    return <div>Check the console.</div>;
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Я имитирую запрос здесь, но вы можете применить ту же логику в своем последнем .then методе.Кроме того, используйте componentDidMount вместо componentWillMount, поскольку это будет устареть.

Важная часть заключается в следующем:

const filterdDatas = datas.filter( data => data.formID === "3");
    this.setState( currentState => ({
        inputDataArr: [ ...currentState.inputDataArr, ...filterdDatas ]
    }));

Мы фильтруем связанные данные, затем обновляем состояние, используятекущий.Просто не забудьте выложить текущий inputDataArr здесь, иначе вы получите вложенный массив из массива и других данных, кроме этого.