Question

我正在尝试实现一个搜索框，该搜索框将过滤来自其余端点的项目，我无法理解如何保持列表的第一个状态，因为如果搜索框为空，我需要它返回它空...我尝试使用this.props.someItem进行许多示例，但是我总是在控制台TypeException中出错，但我读到的关于父子组件的运气并不好。香港专业教育学院试图让一个子组件进行查询并获取数据，但后来我没有设法将其放入父类中，我尝试了“ 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）=> {};如何获得“项目”数组的初始状态？ filterList = 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

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

您的初始状态如下。

def createBorder( ):
global img # image in which we want to append
borderType = cv.BORDER_CONSTANT
TDLU=[0 , 1, 0 , 1 ]#top,down,left,right values 
img = cv.copyMakeBorder(img, TDLU[0] , TDLU[1] , TDLU[2] , TDLU[3] , borderType, None, 255)
row, col = img.shape
print(row, col)

两个数组的数据都相同，请将api中的数据设置为两个数组。

constructor(props) {
  super(props);

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

Working demo

我已经回答了类似的问题here

如何获取反应状态的初始数据

2 个答案: