如何使用React Hooks消耗Spring WebFlux服务

Question

我理解/相信我应该偏爱功能组件，而不是班级组件，以便应用责任隔离。随着React钩的出现，它带来了一种避免上课的新方法，并且仍然具有保持状态。

我创建了一个非常简单的Web通量REST服务。我使用钩子和轴突创建了一个非常简单的反应页面，并且正在获取" data.map不是RestapihooksComponent上的函数"。如果我尝试使用典型REST服务的完全相同的代码，则可以正常工作(通过典型的REST服务，是指没有任何反应性功能的同步代码(。

我想我在与Web通量反应时缺少一些基本想法。几乎没有示例显示如何通过React消耗WebFlux，但没有人显示使用挂钩的方式(至少我没有找到它(。钩子不符合反应性范式吗？根据我的React Limited Knowlodge，我猜这将是一个很好的匹配：常见用户案例正在消费来自服务中的列表并显示为可用。

前端

package.json

...
  "dependencies": {
    "axios": "^0.18.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
...

app.js

import React, { useEffect, useState } from "react";
import axios from "axios";
export default function RestApiHooksComponent() {
  const [data, setData] = useState([]);
  useEffect(() => {
    axios
      .get("http://127.0.0.1:8080")
      .then(result => setData(result.data));
  }, []);
  return (
    <div>
      <ul>
        {data.map(item => (
          <li key={item.result}>
            {item.result}: {item.result}
          </li>
        ))}
      </ul>
    </div>
  );
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

loantable.js

import React from 'react'
const LoanTable = props => (
    <table>
        <thead>
            <tr>
                <th>Result</th>
            </tr>
        </thead>
        <tbody>
            {props.loans.length > 0 ? (
                props.loans.map(loan => (
                    <tr>
                        <td>{loan.result}</td>
                    </tr>
                ))
            ) : (
                    <tr>
                        <td>No loans</td>
                    </tr>
                )}
        </tbody>
    </table>
)
export default LoanTable

WebFlux REST服务

控制器：

@RestController
public class LoansController {
    @Autowired
    private LoansService loansService;
    @CrossOrigin
    @RequestMapping(method = RequestMethod.GET, produces = MediaType.TEXT_EVENT_STREAM_VALUE)
    @ResponseBody
    public Flux<Loans> findAll() {
        Flux<Loans> loans = loansService.findAll();
        return loans;
    }
}

服务：

@Service
public class LoansService implements ILoansService {
    @Autowired
    private LoansRepository loansRepository;
    @Override
    public Flux<Loans> findAll() {
        return loansRepository.findAll();
    }
}

WebFlux配置

@Configuration
@EnableWebFlux
public class WebFluxConfig implements WebFluxConfigurer
{  
}

没有太多相关的细节，但我添加了它是完全贵的代码：

mongodb config

@Configuration
@EnableReactiveMongoRepositories(basePackages = "com.mybank.web.repository")
public class MongoConfig extends AbstractReactiveMongoConfiguration
{  
    @Value("${port}")
    private String port;
    @Value("${dbname}")
    private String dbName;
    @Override
    public MongoClient reactiveMongoClient() {
        return MongoClients.create();
    }
    @Override
    protected String getDatabaseName() {
        return dbName;
    }
    @Bean
    public ReactiveMongoTemplate reactiveMongoTemplate() {
        return new ReactiveMongoTemplate(reactiveMongoClient(), getDatabaseName());
    }
}

pom：

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.4.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.mybank</groupId>
    <artifactId>web</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>web</name>
    <description>webflux</description>
    <properties>
        <java.version>11</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-mongodb-reactive</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-webflux</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>io.projectreactor</groupId>
            <artifactId>reactor-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>
</project>

***编辑

Web Flux服务输出

data:{"timestamp":1558126555269,"result":"8"} data:{"timestamp":1558132444247,"result":"10"} data:{"timestamp":1558132477916,"result":"10"} data:{"timestamp":1558132596327,"result":"14"}

Answer 1

您的反应组件正常工作。在使用效果下将后端结果设置为数据状态之前，请尝试记录后端结果。问题是您的结果，它可能不是数组，并且map功能仅在数组对象上可用(在这种情况下为(。

useEffect(() => {
    axios
      .get("http://127.0.0.1:8080")
      .then(result => {
          const items = result.data // It should be an array to map
          console.log(items)
          if (items && items.length) {
             setData(items)
          }
       });
  }, []);

Answer 2

请，将响应的媒体类型更改为JSON

@RequestMapping(method = RequestMethod.GET, produces = MediaType.APPLICATION_JSON_VALUE)

或仅使用@GetMapping

在这种情况下，Array.isArray(items)返回true：

 useEffect(() => {
    axios.get("http://127.0.0.1:8080/loans")
         .then(result => {
            const items = result.data // It should be an array
            console.log('items=', items, 'array=',  Array.isArray(items))
            if (items && items.length) {
                setData(items)
            }
        });
}, []);