【问题标题】：React App not re-renderedringReact App没有重新渲染
【发布时间】：2018-04-27 19:02:36
【问题描述】：

这就是我的渲染函数的样子

render() {
    const { Ether } = this.state;
    return (
      <div>
        <Container text>
          <Form onSubmit={this.handleSubmit}>
            <Label>Ether Value</Label>
            <Input
              name="Ether"
              value={Ether}
              onChange={this.handeleChange}
              placeholder="Enter Ether"
            />
            <Button type="Submit">ADD PLAYER TO LOTTERY</Button>
          </Form>
          <Button onClick={this.pickWinner}>PickWinner</Button>
        </Container>
      </div>
    );
  }

这是我的handleChange

  handeleChange = (e, { name, value }) => {
    this.setState({
      [name]: value
    });
  };

根据对反应的了解，组件被重新渲染，每个我设置状态的时间。所以我的 onChange 处理程序不应该导致多次渲染，因为我不断在输入框中输入。

这是我的componentdidMount

async componentDidMount() {
   const Manager = await lottery.methods.manager().call();
   const Players = await lottery.methods.getPlayers().call();
   const Balance = await web3.eth.getBalance(lottery.options.address);
   this.setState({
     Manager,
     Balance,
     Players
   });
 }

我希望它工作的方式是，每次我点击提交时，我都希望调用 componentdidmount，即重新渲染组件，但这不是发生的事情。

我在这里缺少什么？组件渲染还有什么我还没有掌握的吗？

【问题讨论】：

Input 组件是如何定义的？您确定它按照您的预期将name 和value 参数传递给您的handleChange？
如果你举个例子here我帮你看看。
那么您是否希望在您键入或单击提交时更新状态？不清楚。
@Colin 请停止在每个标记为reactjs 的问题下发送垃圾邮件。
@trixn 这不是垃圾邮件，我只会在我可以运行它的情况下轻松修复他们的代码时发布它。如果我可以通过阅读来解决它，我不要求示例。

标签： reactjs

【解决方案1】：

- componentDidMount is a life cycle method of react. componentDidMount
- will call only once after render. When you change state, render
- function will call again but componentDidMount will not.

结帐链接供您参考

React life cycle method componentDidMount

 componentDidMount() {
     yourfunction();
 }

 handeleChange = (e, { name, value }) => {
    this.setState({
      [name]: value
    });
    yourfunction();
 };

 yourfunction () {
    const Manager = await lottery.methods.manager().call();
    const Players = await lottery.methods.getPlayers().call();
    const Balance = await web3.eth.getBalance(lottery.options.address);
    this.setState({
        Manager,
        Balance,
        Players
    });
 }

【讨论】：

这对我有用，但在我的情况下，我有多个函数，如 handleChange ，所以每次调用你的函数，看起来有点重复任务，如答案之一所述，使用 componetDidUpdate 是更好的解决方案？
@TanmayBhattacharya:- componentDidUpdate 将在第二次渲染调用后调用。在你的情况下，这不是一个安全的地方打电话给your function。正如您所说，您有多个功能，例如handleChange。假设你有一个函数调用handleChange，handleChange1。如果是handleChange 和handleChange1，则需要更新状态并分别调用yourfunction、yourfunction1。在这种情况下，componentDidUpdate 将调用并且yourfunction, yourfunction1 都会调用，因为您一次只想调用一个函数。
@TanmayBhattacharya 要了解有关反应生命周期反应的更多信息，请访问以下链接。 [reactjs.org/docs/react-component.html]（React 生命周期）[gist.github.com/hdlion/0a6fad76878fcabcf2e6bf20170f713a`]（React 生命周期）

【解决方案2】：

首先，在组件挂载后调用componentDidMount()。

其次，您的输入似乎设置不正确。有关如何处理输入的简单示例，请参阅here。

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }

  handleChange = (e) => {
    const name = e.target.value;

    this.setState({
      name,
    });
  }

  render() {
    return (
      <div>
        <Hello name={this.state.name} />
        <input onChange={this.handleChange} />
      </div>
    );
  }
}

【讨论】：

不，componentDidMount()只在初始化时被调用，除非组件被卸载，否则componentDidUpdate()被调用。
对不起，我的意思是在组件挂载之后。