React问题：无法向Hook中的已有数组添加对象

我在React应用里尝试把Axios请求返回的数据转成对象后添加到state里。对象本身没问题，打印输出也符合预期，但不管用什么代码，把它加到Hook里都没反应。试过各种写法，大部分来自一篇旧帖子，需求和我完全一致，但所有找到的资料里的写法都解决不了问题。

附上相关Hook和函数代码：

const [queryResultData, setQueryResultData] = useState([])

function queryResultDataHandler(resultData){
    for(let i=0; i < resultData.length; i++){
        const data=resultData[i];
        let book={
            title: data.title,
            publisher: data.publisher,
            copyright: data.publishedDate
        }
        setQueryResultData([...queryResultData,book]);
    }
}

还有一张截图，显示每次尝试添加数据后对象内容和数组状态：

附上所有相关代码：

包含问题方法的主面板 #

function AddBookAutomaticPane() {
    
    const [queryResultData, setQueryResultData] = useState([])
    const [selectedBookData, setSelectedBookData] = useState([])
    const [currentPane, setCurrentPane] = useState(
        <AddBookAutomaticSearch queryResultDataHandler={queryResultDataHandler} />)

    function switchPaneHandler(paneName){
        if (paneName === "search"){
            setCurrentPane(<AddBookAutomaticSearch queryResultDataHandler={queryResultDataHandler} switchPaneHandler={switchPaneHandler} />);
        } else if (paneName === "displayResults"){
            setCurrentPane(<AddBookAutomaticDisplayResults queryResultsData={queryResultData} setSelectedBookData={setSelectedBookData}/>);
        } else if (paneName === "previewAndfinalize"){
            setCurrentPane(<AddBookAutoPreviewAndFinalize selectedBookData={selectedBookData} />);
        }
    }

    function queryResultDataHandler(resultData){
        const bookData = resultData.map(({title,
               publisher,
               publishedDate
            }) => ({
                title,
                publisher,
                copyright: publishedDate
            }))
        setQueryResultData((oldQueryResultData)=>[...oldQueryResultData,...bookData]);

        switchPaneHandler("displayResults");
    }

    return (
        <div id="AddBookAutomatic">
            {currentPane}
        </div>
    );
}

export default AddBookAutomaticPane;

切换到的面板 #

function AddBookAutomaticDisplayResults(props){

    return (
        <section>
            <h1>Display Results</h1>
            {props.queryResultsData.map(() => (
                <BookDetailsPreviewPane />
            ))}
        </section>

    );
};

export default AddBookAutomaticDisplayResults;

核心问题1：直接渲染组件实例导致状态无法同步 #

你在setCurrentPane里直接创建组件实例（比如<AddBookAutomaticDisplayResults .../>），这种写法会让组件脱离React的状态更新流程。当queryResultData变化时，已经渲染的组件实例拿不到最新的props——因为它是在状态更新前创建的，没有和当前组件的状态绑定。

核心问题2：旧代码循环更新状态的陷阱（已在更新代码中解决） #

旧代码用循环多次调用setQueryResultData，但React状态更新是异步批量处理的，每次循环里的queryResultData都是初始值，最终只会添加最后一个book对象。不过你更新后的代码用了函数式更新setQueryResultData((old) => [...old, ...bookData])，这个问题已经修复。

具体解决步骤： #

1. 修改面板切换逻辑，存储面板名称而非组件实例
   把currentPane改成存储面板名称，在render阶段根据名称渲染对应组件，确保状态更新时组件能拿到最新props：

   function AddBookAutomaticPane() {
       const [queryResultData, setQueryResultData] = useState([])
       const [selectedBookData, setSelectedBookData] = useState([])
       const [currentPaneName, setCurrentPaneName] = useState("search")
   
       function switchPaneHandler(paneName){
           setCurrentPaneName(paneName);
       }
   
       function queryResultDataHandler(resultData){
           const bookData = resultData.map(({title, publisher, publishedDate}) => ({
               title,
               publisher,
               copyright: publishedDate
           }))
           setQueryResultData(old => [...old, ...bookData]);
           switchPaneHandler("displayResults");
       }
   
       const renderCurrentPane = () => {
           switch(currentPaneName) {
               case "search":
                   return <AddBookAutomaticSearch queryResultDataHandler={queryResultDataHandler} switchPaneHandler={switchPaneHandler} />;
               case "displayResults":
                   return <AddBookAutomaticDisplayResults queryResultsData={queryResultData} setSelectedBookData={setSelectedBookData}/>;
               case "previewAndfinalize":
                   return <AddBookAutoPreviewAndFinalize selectedBookData={selectedBookData} />;
               default:
                   return null;
           }
       }
   
       return (
           <div id="AddBookAutomatic">
               {renderCurrentPane()}
           </div>
       );
   }
   

2. 修复列表渲染的key缺失问题
   在AddBookAutomaticDisplayResults的map循环里，给每个子组件添加唯一key（优先用数据的唯一标识，index为临时方案），否则React无法正确识别列表项变化：

   function AddBookAutomaticDisplayResults(props){
       return (
           <section>
               <h1>Display Results</h1>
               {props.queryResultsData.map((book, index) => (
                   <BookDetailsPreviewPane key={index} book={book} />
               ))}
           </section>
       );
   };
   

3. 确保子组件接收并使用props
   把book数据传给BookDetailsPreviewPane，否则组件无法展示内容。

修改后，状态更新会触发面板重新渲染，列表就能正常显示最新数据了。

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