react中如何获取state的初始数据

Question

我正在尝试实现一个搜索框，它将过滤来自休息端点的项目，但我无法理解如何保持列表的第一个状态，因为我需要它 return 它如果搜索框是空的...我用 this.props.someItem 尝试了很多例子，但我总是在控制台 TypeException 中遇到错误我读到有关父子组件的信息，但没有运气。我试图让一个子组件执行查询并获取数据，但后来我没能把它放到父组件中 class 我试过了 "this.state = { foo[] : foo2 }"；不工作我试着直接分配它 foo = this.props.foo2;再次没有运气我得到了TypeError。抱歉，这可能是一个简单的问题，但我对 js 很陌生并且会做出反应。感谢您提前提供任何帮助。

  class About extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            items: [],
        };

        this.handleChange = this.handleChange.bind(this);

    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            items: nextProps.model
        });
    }

    componentDidMount() {
        fetch('something/')
            .then(res => res.json())
            .then((result) => {
                    this.setState({
                        items: result
                    });
                }
            )
    }

我有一个函数 handleChange(e) => { };如何获得 "items" 数组的初始状态？ filteredList = this.props.items - 我试过这个它给我错误 TypeError: undefined ans 如果我改变状态也可以但是原始数据丢失了我想问一下获取数据是一个好习惯例如，每次如果查询包含此视图的全部数据。

Answer 1

试试这个：

class About extends React.Component {

constructor(props) {
    super(props);

    this.state = {
        items: [],
        filteredItems: []
    };

    this.handleChange = this.handleChange.bind(this);

}
componentDidMount() {
    fetch('something/')
        .then(res => res.json())
        .then((result) => {
            this.setState({
                items: result
                //Note: You can set filteredItems here to result as well  
                //if you want it to start out unfiltered
            });
        }
        )
}
handleChange(evt) {
    const baseItems = this.state.items;
    //Your filtering logic here
    this.setState({ filteredItems: yourFilteredArray });
}

Answer 2

您需要两个数组，一个用于原始数据，一个用于过滤后的数据。

您的初始状态将如下所示。

constructor(props) {
  super(props);

  this.state = {
    items: [],
    filteredList: [],
    isLoading: true, // show a spinner while fetching data from api
  };
  //....
}

您的两个数组将具有相同的数据，将 api 中的数据设置为两个数组。

componentDidMount() {
  fetch("something/")
    .then(res => res.json())
    .then(result => {
      this.setState({
        items: result,
        filteredList: result,
        isLoading: false,
      });
    });
}

Working demo

我回答过类似的问题

react中如何获取state的初始数据

How to get the initial data of the state in react

searchbar

reactjs