Question

为什么render函数不会更新状态？查看代码中的注释。在代码内部，我有一个静态注释掉的版本，这个可行。但是动态函数get（..）不会更新渲染功能的状态。

import React, { Component } from 'react';
import Products from "./components/products";

import './App.css';

//function App() {
class App extends Component {

  state = {
    products: [],
  }

  componentDidMount() {
    const productsURL = 'http://wundp.192.168.43.67.xip.io/rest/products';


    const get = (url, key) => {
      fetch(url)
          .then(res => res.json())
          .then((data) => {
            /* this works and i see the data */
            console.log('1: ', data[key]);

            /* the state is not updated, why?  */
            this.setState({ key : data[key] })
          })
          .catch(console.log)
    }

    /* this fails, the state in the render function is later empty, why?  */
    get(productsURL, 'products');

    /* this works!
    fetch('http://wundp.192.168.43.67.xip.io/rest/products')
        .then(res => res.json())
        .then((data) => {
          console.log(data);
          this.setState({ products: data.products })
        })
        .catch(console.log)
    */
  }

  render() {
    /* this.state.products is empty, why?  */
    console.log('state: ',this.state.products);

    return  (
        <Products products={this.state.products} />
    );
  }

}

export default App;

感谢您的帮助。

Answer 1

将状态更新为

state = {
    products: [],
    key: int
}

然后下面的代码起作用-this.setState({ key : data[key] })-> setState将更新状态中存在的属性。

const get = (url, key) => {
      fetch(url)
          .then(res => res.json())
          .then((data) => {
            this.setState({ key : data[key] })
          })
          .catch(console.log)
    }

请让我知道。

Answer 2

感谢您的反馈。您的解决方案无效。这会给这个错误，因为我不使用打字稿。第13行：“ int”未定义

我找到了解决方案，我必须用[]包装密钥。 this.setState（{[key]：data [key]}）

然后就可以了：-）

承诺内的setState未更新

2 个答案: