ReactJS 显示抓取响应 onClick

Question

我正在做一个 ReactJS 项目，您可以在按下生成按钮时随机生成一个 activity。我正在获取我的 api 以显示其中的一些数据。这很好用。现在我想在每次单击生成按钮（位于主组件中）时获取并显示返回的数据。所以生成按钮必须重新获取并刷新组件。此外，默认情况下它必须为空。我搜索了一段时间，找不到相关的答案。你们中的一些人可以帮助我吗？谢谢

获取组件

import React from "react";

export class ItemLister extends React.Component {
    constructor() {
        super();
        this.state = { suggestion: "" };
    }

    componentDidMount() {
        fetch("......./suggestions/random", {
            method: "GET",
            dataType: "JSON",
            headers: {
                "Content-Type": "application/json; charset=utf-8"
            }
        })
            .then(resp => {
                return resp.json();
            })
            .then(data => {
                this.setState({ suggestion: data.suggestion });
            })
            .catch(error => {
                console.log(error, "catch the hoop");
            });
    }

    render() {
        return <h2>{this.state.suggestion}</h2>;
    }
}

主页组件

import React from "react";
import { ItemLister } from "./apiCall";

export class Home extends React.Component {
    constructor(props) {
        super(props);
        console.log();
        window.sessionStorage.setItem("name", this.props.params.name);
        window.sessionStorage.setItem("token", this.props.params.token);
    }

    render() {
        return (
            <div className="contentContainer AD">
                <table>
                    <thead>
                        <tr>
                            <th>
                                <p>Het is heel leuk als het werkt!</p>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <ItemLister />
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div className="container center">
                    <button>GENERATE</button>
                    <button>SAVE</button>
                    <button>MATCH</button>
                </div>
            </div>
        );
    }
}

Answer 1

我不太确定我是否理解正确...但是由于您将 fetch 添加到 react extended class 中，您可以像这样在 home 组件中渲染它：

  state = {
    visible: false
  }

  generateItem() {
    if (this.state.visible) {
      return <ItemLister />
    }
    return <h2>nothing to show</h2>
  }

  render() {
    return(
      <div>
        <button onClick={() => this.setState({visible: true})}>Click</button>
        {this.generate()}
      </div>
    )
  }

onClick 函数会在用户每次点击它时更新状态，并且会发生新的重新渲染，从而用新的随机词再次调用 generateItem。

希望这就是您要搜索的内容。

Answer 2

我会说您将获取逻辑移至 home 组件并在 home 组件中维护状态，就像您在 Itemlister 组件中所做的那样。然后你所要做的就是将你的状态传递给 Itemlister 组件。您的主页组件将如下所示

export class Home extends React.Component {
constructor(props) {
    super(props)
    this.state = {suggestion: ""}
    ...
}

componentDidMount(){
  // For initial data
  this.fetchData();
}

fetchData = () => {
  fetch("......./suggestions/random", {
    method: "GET",
    dataType: "JSON",
    headers: {
      "Content-Type": "application/json; charset=utf-8",
    }
  })
  .then((resp) => {
    return resp.json()
  }) 
  .then((data) => {
    this.setState({ suggestion: data.suggestion })                    
  })
  .catch((error) => {
    console.log(error, "catch the hoop")
  })
}

render() {
    return (
        ...
                <tbody >
                   // Pass state to itemlister like this
                    <tr><td><ItemLister suggestion={this.state.suggestion}/></td></tr>
                </tbody>
            </table>
            <div className="container center">
                // Add event handler here. On every click it will fetch new data
                <button onClick={this.fetchData}>GENERATE</button>
                <button>SAVE</button>
                <button>MATCH</button>
            </div>
        </div>
    )
  }
}

并且您的 ItemLister 组件负责通过 props 显示数据。

export class ItemLister extends React.Component {
    constructor() {
    super();
    }

    render() {
    return(
      <h2> 
        {this.props.suggestion}
      </h2>
      )
     }
    }

根据评论中 dubes 的建议，如果您不想在此组件中保持任何状态，则可以像这样制作此功能组件

function ItemLister(props) {
  return <h2> 
            {props.suggestion}
          </h2>;
}

ReactJS 显示抓取响应 onClick

ReactJS display fetch response onClick

fetch

reactjs