Alex's questions

因此，有一个 React 钩子，其中，当单击按钮时，会向服务器发出请求，在此请求期间，用户可以单击按钮并取消请求。axios 功能按预期工作，但由于 React 挂钩中的状态更改，取消按钮要么不起作用，要么引发错误。

工作总体进展：

1. 我们创建了两种状态——第一种用于用户数据，第二种用于显示数据加载的状态。
2. cancelToken - 为每个用户请求设置取消令牌。
3. 对于每个请求，我们重置可用数据（如果有）（用户已经按下按钮）并将请求状态设置为 true - 这反映在标记中以演示等待状态。正是这个状态更改步骤导致了问题；没有它，请求的取消将正常进行。
4. 当接收到数据时，我们将请求的状态更改为 false 并设置接收到的用户数据。
5. 单击取消按钮只需调用令牌的取消方法。如果使用上面的状态改变，那么这一步会引发错误——“Cannot read property 'cancel' of null”，没有它就没有错误。

const getServerData = () => {

    const [userData, setUserData] = useState(null);
    const [isDataFetched, setFetchingStatus] = useState(false);
    let cancelToken = null;

    const fetchSomeData = () => {
        cancelToken = Axios.CancelToken.source();

        setFetchingStatus(true);
        setUserData(null);

        Axios.get("api/index", {
            cancelToken: cancelToken.token
        }).then(data => {
            setFetchingStatus(false);
            setUserData(data.firstName);
        });
    };

    const cancelRequest = () => {
        cancelToken.cancel();
    };

    return (
        <div>
            {
                isDataFetched
                &&
                <div>
                    <h1>WAITING</h1>
                    <div><button onClick={cancelRequest}>Cancel request</button></div>
                </div>
            }
            <p>{ userData && userData.toString()}</p>
            <p>
                <button onClick={fetchSomeData}>Click me</button>
            </p>
        </div>
    )

创建 React 组件时，通过 axios 向服务器发出请求以获取视图数据，在我的情况下，它只是对附近文件夹中的 php 脚本的请求。问题是，由于某种未知的原因，请求在大约 80% 的情况下是成功的——数据到达并且一切正常，但有时，在等待一段时间后，会抛出关于 axios 超时到期的错误，即使它至少是 5/10/15/etc 秒，感觉它根本没有到达 php 脚本本身，在 php 方面，数据只是在到达路由时给出，它总是与下面描述的请求，没有复杂的计算，也没有睡眠。

更新。问题出在服务器端，通过postman模拟GET请求时响应太长，周期性返回空body，没有报错等。也许这是 PHP 或 Apache 设置中的内容？

Axios 设置

const api = axios.create({
    baseURL: "/api/",
    timeout: 1000 * 5,
    withCredentials: true
});

要求

api.get(uri)
    .then(responce => dispatch({ type: "received", payload: responce.data }))
    .catch(error => dispatch({ type: "error", payload: error }))

向控制台输出错误时，只需编写：

error from server in action received: timeout of 5000ms exceeded

标题。

成功的：

General

Request URL: http://localhost:3000/api/category/phones
Request Method: GET
Status Code: 200 OK
Remote Address: 127.0.0.1:3000
Referrer Policy: strict-origin-when-cross-origin

Response Headers
connection: close
Content-Encoding: gzip
content-type: text/html; charset=UTF-8
transfer-encoding: chunked
Vary: Accept-Encoding

Request Headers
Accept: application/json, text/plain, */*
Cache-Control: no-cache
Connection: keep-alive
DNT: 1
Host: localhost:3000
Pragma: no-cache
Referer: http://localhost:3000/category/phones
X-KL-Ajax-Request: Ajax_Request

超时错误返回的那个

General
Request URL: http://localhost:3000/api/category/phones
Referrer Policy: strict-origin-when-cross-origin

Request Headers
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Cache-Control: no-cache
Connection: keep-alive
Host: localhost:3000
Pragma: no-cache
Referer: http://localhost:3000/category/phones
X-KL-Ajax-Request: Ajax_Request

PHP 脚本

if ($_SERVER["REQUEST_METHOD"] === "GET") {
    $uri = trim(filter_var($_SERVER["REQUEST_URI"], FILTER_SANITIZE_URL));
    print json_encode(Request::getCategoryData($uri, 5));
}


    public static function getCategoryData($uri, $limit = null)
    {
        // тут я сократил, просто извлечение из uri подстроки для названия 
        // таблицы категории, типа phones/gadgets/etc
        $category_products_table = $uri; 
        
        $products_query = $limit
            ? "SELECT * FROM {$category_products_table} LIMIT {$limit}"
            : "SELECT * FROM {$category_products_table}";

        $pdo = Connect::exec()->prepare($products_query);
        $pdo->execute();
        return $pdo->fetchAll();
    }

用户第一次进入页面时，需要渲染数据，据我了解，获取初始数据的最佳位置是在根 App 组件描述之前的查询中。

import fetchIndexData from "./api/axios/fetchIndexData";
store.dispatch(fetchIndexData());

export default class App extends Component {
    render() {
        return (
           <Provider store={store}>
              <... тут роутинг и все такое>
           </Provider>
        )
    }
}

然后，理论上，数据进入 Promo 组件，它首先显示并依赖于这些数据，循环显示它们（带有产品的数组）。但是使用这种方法，服务器的响应仍然没有时间到达，并且组件第一次给出了关于 undefined in props 的错误。我用 defaultProps 存根解决了这个问题，组件空闲一个空数组，渲染一个半空的组件一秒钟，然后来自服务器和普通道具的响应 - 它们已经显示在一个循环中。

class Promo extends Component {

    static defaultProps = {
        initialListOfProducts: { data: [] }
    };

    render() {

        const { data } = this.props.initialListOfProducts;
        return (
            <section>
                    <ul>
                        {data.map(item => {
                            return (
                                <ProductCard key={item.id} item={item}/>
                            )
                        })}
                    </ul>
            </section>
        )
    }
}


function mapStateToProps(state) {
    return {
        initialListOfProducts: state.db.initialListOfProducts,
    }
}

function mapDispatchToProps(dispatch) {
    return {
        fetchIndexData: () => {
            dispatch(api.fetchIndexData());
        },
    }
}


export default connect(mapStateToProps, mapDispatchToProps)(Promo);

问题：有没有办法在网站第一次渲染时更方便地从服务器接收数据，以便不执行第一个异步请求，而是立即获得初始化数据？还是只有这样一个选项或只是某种微调器可以显示？

所以，问题是这样的：有两个页面，索引和单页，使用模板引擎，页面上只有内容部分发生变化，每个人都有一个共同的标题，它包括main.js文件，所有可用页。

第二页（单页）有数据标签，标签的工作是通过JavaScript实现的，我把代码放在一个单独的模块——Tabs.js中。因此， main.js 包含此模块的导入：

// main.js
import Tabs from "./js/modules/Tabs.js"; 
Tabs();

其实这个代码只有单页页面需要，在index上不用，因为那里没有tab，但是main.js到处调用。而且我想了解如何仅在正确的情况下正确实施此类模块的工作。它是否应该包含一些对页面地址的检查，或者检查选项卡选择器以表明选择成功并且存在这样的元素并且您可以使用它，还是其他？

大家好，我正在阅读有关自适应布局的内容，并且遇到了用于包装网站的代码，例如 div.wrapper {max-width: 1200px; 宽度：100%}。思路很明确：块的宽度不应该超过 1200px，但是可以缩小。但是，如果块级元素本身跨越了父元素的整个宽度，那么拥有 100% 的宽度有什么意义呢？