我在 this.state 中得到了值，我正在过滤状态，但我得到的值为 null

Question

我是新来的反应，我正在研究搜索属性。当我尝试过滤它时，我从状态组件中获取值，它抛出以下错误。 “TypeError：无法读取 null 的属性‘值’”

   return (
        <div>
        <Form>

          <Row>
          <Col sm={10}>
          <FormControl type="text" placeholder="Search" value = {this.state.Searchvalue} onChange = {e => this.setState(prevState => ({ 
          SearchBooks: prevState.SearchBooks.filter(book => book.title === e.target.value)
        }))} />
          </Col>
          <Col sm={2}>
          <Button variant="outline-success">Search</Button>
          </Col>
          </Row>

        </Form>

        <br/>

              {this.state.SearchBooks.map(book => (

                <div>

                    <Card key = {book.id}>
                    <Card.Header as="h5">{book.bookname}</Card.Header>
                    <Card.Body>
                    <Card.Title>{book.title}</Card.Title>
                    <Card.Text>
                        Author : {book.authorname}<br/>
                        Email id : {book.aemailid}<br/>
                        ISBN : {book.isbn}<br/>

                    </Card.Text>
                    <Button variant="danger" onClick={ () => this.removeBook(book.id)}>Delete Book</Button> &nbsp;&nbsp;
                    <Button variant="primary" onClick={() => this.flagedit(true,book)}>Edit Book</Button>
                    {/* <Button variant="primary" onClick={() => this.editmodal(book.bookname)}>Edit Book</Button>  */}
                    {this.editmodal()}
                    </Card.Body>
                    <Card.Footer className="text-muted">count : {book.count}</Card.Footer>
                    </Card>
                    <br/>
                </div>

              ))}

        </div>
    )
}

Answer 1

由于性能问题，react 重用事件对象，在不同事件之间将它们设置为 null。因此，在执行 stateUpdated 函数时，事件的值为 null，因此尝试读取 null.value 将抛出“TypeError: Cannot read property 'value' of null”

要解决它，你可以这样做

<FormControl
  type="text"
  placeholder="Search"
  value={this.state.Searchvalue}
  onChange={e => {
    const currentValue = e.target.value;
    this.setState(prevState => ({
      SearchBooks: prevState.SearchBooks.filter(
        book => book.title === currentValue
      ),
    }));
  }}
/>;

Answer 2

问题是因为您在setState() 中使用了e.target.value。

影响这一点的两个因素：

1. 由于onChange是Synthetic Event，调用后会被复用。因此，e 在onChange 之后被清除/无效

2. setState() 是异步的。

因此，您可以：

1.声明一个变量：

onChange = (e) => {
  const eventValue = e.target.value // declare a variable

  this.setState(prevState => ({ 
    SearchBooks: prevState.SearchBooks.filter(book => book.title === eventValue)
  })
}

<FormControl type="text"
  onChange={onChange}
/>

或

2。通过event.persist()

坚持活动

onChange = (e) => {
  e.persist() // persist event

  this.setState(prevState => ({ 
    SearchBooks: prevState.SearchBooks.filter(book =>
      book.title === event.target.value
    )
  })
}