React函数组件中通过ChangeHandler设置State报错排查

错误根源 #

你的组件在接收和传递props时存在两个核心错误：

• React组件的props是单个对象参数，你直接写(setSearchInput)或(setSearchItems)会把整个props对象当成变量赋值，导致实际拿到的不是预期的setter函数。
• Navigation向SearchInput传递props时使用了错误的属性名，与接收方的变量名不匹配。

修正后的完整代码 #

Body组件（无需修改） #

import 'bootstrap/dist/css/bootstrap.css';
import {Container} from "react-bootstrap";
import Navigation from './Navigation'
import axios from 'axios'
import {useState,useEffect} from "react";


function Body() {
    const [searchItems, setSearchItems] = useState([{}])

    useEffect(() => {
        console.log(searchItems)
    }, [])

    return (
        <Container>
            <Navigation setSearchItems={setSearchItems}/>
        </Container>
    );
}

export default Body;

Navigation和SearchInput组件（修正props接收与传递） #

import Navbar from 'react-bootstrap/Navbar';
import Form from 'react-bootstrap/Form';
import {InputGroup} from "react-bootstrap";
import axios from 'axios';
import {useState, useEffect} from "react";

const api_key = process.env.API_KEY;

// 修正：解构props对象，获取setSearchItems
const SearchInput = ({ setSearchItems }) => {
    // 修正：移除参数里的重复setSearchItems声明，避免覆盖props方法
    async function changeHandler(e) {
        if (e.target.value.length > 2) {
            const url = 'https://api.thedogapi.com/v1/breeds/search?q=' + e.target.value
            const config = {
                method: 'GET',
                mode: 'cors',
                headers: {
                    'x-api-key': api_key
                }
            }
            const { data } = await axios.get(url, config)
            setSearchItems(data)
        }
    }

    return (
        <InputGroup style={{
            marginLeft: '50px',
            marginRight: '50px',
            paddingTop: '10px',
            paddingBottom: '10px',
            width: '50%'
        }}>
            <Form.Control
                placeholder="Enter Dogs Breed"
                aria-label="Breed"
                onChange={changeHandler}
            />
        </InputGroup>
    )
}

// 修正：解构props对象获取setSearchItems，传递给SearchInput时使用正确属性名
const Navigation = ({ setSearchItems }) => {
    return (
        <Navbar fixed="top" bg='light'>
            <SearchInput setSearchItems={setSearchItems}/>
        </Navbar>
    )
}

export default Navigation;

关键修正说明 #

1. 组件接收props的正确方式：所有React组件必须通过解构props对象来获取属性，比如const Navigation = ({ setSearchItems }) => {...}，而非直接接收单个参数。后者会把整个props对象赋值给变量，导致拿到的不是setter函数。
2. 保持props属性名一致：Navigation向SearchInput传递时，要和Body传给Navigation的属性名统一为setSearchItems，之前的setSearchInput会导致SearchInput无法获取正确的setter。
3. 移除重复变量声明：changeHandler中不要重复声明setSearchItems参数，否则会覆盖props传入的方法，引发调用错误。

另外，你第二种changeHandler写法里的setSearchItems([response.data])会把API返回的数组再嵌套一层，直接使用setSearchItems(response.data)即可，因为接口返回的response.data本身就是数组格式。

内容的提问来源于stack exchange，提问作者SamPhoenix