React：搜索栏捕获关键但不显示数据

Question

我是一个完全的初学者。我有以下 React 组件，我需要在其中显示一个包含数据的表格，并使用生成的 API 对它执行搜索，该 API 使用 Laravel 作为后端。

显示数据效果很好，直接从 API 链接搜索数据有效，但是当尝试对表格执行搜索时，所有显示的数据都消失了，没有结果显示。 p>

如果有帮助，在 chrome 的控制台中输入以下内容

SyntheticEvent {dispatchConfig: {…}, _targetInst: FiberNode, nativeEvent: InputEvent, type: "change", target: input.form-control, …}

SyntheticEvent {dispatchConfig: {…}, _targetInst: FiberNode, _dispatchInstances: FiberNode, nativeEvent: InputEvent, _dispatchListeners: ƒ, …}

我相信我在handleSearchChange 有问题

class Patient extends React.Component {
    constructor(props) {
        super(props)          
        
        this.state = {
            patients : [],
        };

        this.handleSearchChange = this.handleSearchChange.bind(this);
    }

       // Problem in this one
        handleSearchChange(key){   
        console.log(key);
        fetch("api/patients/search?q="+key)
        .then(response => {
          this.setState({
            patients:[]
          }); 
        })
      } 
      
        componentDidMount() {
            axios.get('api/patients')
            .then(response => {
              this.setState({
                patients: response.data})
            })
            .catch(err => console.log(err));                
        }

        render() {
        return (
          <div>
            <Container>
              <div>
                  <input
                    type="text"
                    className="form-control"
                    placeholder="Search..."
                    onChange= onChange={this.handleSearchChange}
                  /> 
              </div>
    
              <Table>
                <Thead>
                  <Tr>
                    <Th>ID</Th>
                    <Th>FIRST NAME</Th>
                    <Th>LAST NAME</Th>
                  </Tr>
                </Thead>
    
                <Tbody>
    
                  {this.state.patients.reverse().map((patient) => (
                    <Tr>
                      <Td>
                        {patient.id}
                      </Td>
                      <Td>
                        {patient.firstname}
                      </Td>
                      <Td>
                        {patient.lastname}
                      </Td>
                    </Tr>
                  ))}
    
                </Tbody>
    
              </Table>
            </Container>
          </div>
        );
      }
    }
    
    export default Patient;

Answer 1

这是你输入的问题

                  <input
                    type="text"
                    className="form-control"
                    placeholder="Search..."
                    onChange= onChange={this.handleSearchChange}
                  /> 

您需要从输入中捕获 onChange 事件，获取值然后将其发送到 handleSearchChange 函数，如下所示：

                  <input
                    type="text"
                    className="form-control"
                    placeholder="Search..."
                    onChange={e => this.handleSearchChange(e.target.value)}
                  /> 

你可能会问为什么e.target.value，它是事件对象，你可以通过console.log查看更多细节。

编辑：在handleSearchChange函数中，你还需要setState从响应中得到的患者，就像你在componentDidMount方法中所做的一样