Question

我将数据从表单发布到我的json服务器url localhost：3000 / recipes中，并且试图在不刷新页面的情况下获取其他组件中的数据。我将一些数据发布到配方url，当我返回页面上的其他hashURL时，我需要刷新页面以获得结果。有什么方法可以使生命周期或类似情况下的数据异步？

componentDidMount() {
    recipesService.then(data => {
      this.setState({
        recipes: data
      });
    });
  }

recipe.service

const url = "http://localhost:3000/recipes";
let recipesService = fetch(url).then(resp => resp.json());
let sendRecipe = obj => {
  fetch(url, {
    method: "POST",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json"
    },
    body: JSON.stringify(obj)
  })
    .then(resp => resp.json())
    .then(data => console.log(data))
    .catch(err => console.log(err));
};

module.exports = {
  recipesService,
  sendRecipe
};

Answer 1

可能您想使用Redux之类的东西。：）

或者您可以为此组件创建缓存：

// cache.js
let value;
export default {
  set(v) { value = v; },
  restore() { return value; },
};

// Component.js
import cache from './cache';
...
async componentDidMount() {
  let recipes = cache.restore();
  if (!recipes) {
    recipes = await recipesService;
    cache.set(recipes);
  }
  this.setState({ recipes });
}

React-如何从获取POST获取异步数据

1 个答案: