Question

所以我试图将数据传递到 React 中的另一个状态。这是发生的事情 -> 在页面加载时我从 Google Books API 获取我的书我有那本书的数据数组。我试图根据数组中的数据设置 4 个事物的状态。这是我遇到麻烦的地方，它没有更新状态，有时 Bookdetails 页面没有抓住它。这是我的主页功能：

const viewBookDetails =  bookNumber => props => {
 //   setBookID({ bookID: bookNumber });
    console.log("Test test test");
    console.log(coryBooks[bookNumber]);
    setState({ title: coryBooks[bookNumber].volumeInfo.title, author: coryBooks[bookNumber].volumeInfo.author  });
    setState({ img: coryBooks[bookNumber].volumeInfo.img });
    setState({ publisher: coryBooks[bookNumber].volumeInfo.publisher });

    setState ({
        publisher: "test"
    });

    console.log("state: ",state);
    history.push({
        pathname: '/Bookdetails',
        state 
    });

};

当我 console.log 它时，它说数据是“”。有时，我的意思是完全随机，有时另一个页面会得到正确的数据，并相应地更新，但我不知道为什么。这是我的另一个页面：

import '../App.css';
import Navigation from './Navigation';
import Milestone1part2 from './Milestone1part2';
import React, { useState, useEffect } from 'react';

import { useHistory, context, NavLink } from "react-router-dom";


const Bookdetails = props => {
    const { title, author, img, publisher } =
        (props.location && props.location.state);
    const history = useHistory();


    useEffect(() => {
        console.log(title);
        console.log(history.location.state);
    }, []);


    return (
        <div>
            <NavLink to="/" activeClassName="active">
                Go Back
      </NavLink>
            <div className="form-details">
                <div>
                    <strong>Publisher:</strong> {publisher}
                </div>
               
            </div>
        </div>
    );
};
export default Bookdetails;

编辑2：这是我的按钮的代码，它发送书号的int并调用函数“viewBookDetails”

{coryBooks.map(function (item, i) {
                        return <tr key={'item-' + i}> <td>{item.volumeInfo.title}</td><td> <a href={item.volumeInfo.previewLink}> <img src={item.volumeInfo.imageLinks.smallThumbnail} alt="image" /> </a>
                            <button type="submit" onClick={viewBookDetails(i) } > Book details </button> </td> </tr>
                    })}

编辑：这是我的整个主页代码，所以编辑器给了我一个困难是时候在这里格式化了。 https://pastebin.com/4VD8JqFn

除了历史记录之外，还有更好的方法在页面之间传递数据吗？为什么我的状态没有更新吗？

我一直在为这个问题而烦恼，任何帮助都是赞赏。

React 无法将状态从一个页面传递到另一个页面

0 个答案: