如何通過過濾獲取的數據來更新狀態？

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 ，否則您將獲得嵌套的數組數組以及其他數據。