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，否则您将获得嵌套的数组数组以及其他数据。

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

1 个答案: