javascript - 如何通过过滤获取的数据来更新状态？

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

您可以在更新状态之前过滤数据。这是一个工作示例。

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 ，否则您会得到一个数组的嵌套数组以及除此之外的其他数据。