Question

我正在开发一个ReactJS项目，您可以在按下生成按钮时生成随机活动。我正在对我的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

我会说您将获取逻辑移动到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组件有责任通过道具显示数据。

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

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

根据dubes在评论中提出的建议，如果您不想维护此组件中的任何状态，那么您可以像这样制作此功能组件

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

Answer 2

我不太确定我是否理解正确...但是因为你在反应扩展类中添加你的fetch，你可以像这样在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。

希望这就是你要找的东西。

ReactJS显示onClick的获取响应

2 个答案: