Reactjs 反应渲染两次！！！如何停止重新渲染？ 从“React”导入React； 从“react”导入{Component}； /* 从“react”导入{Component}；等同於 从“React”导入React； 常量组件=React.Component； */ 从“react”导入{Fragment}； /* 碎片為佔位符,使用他的原因是因為JSX語法僅能接受一個标签包裹所有其他标签，若是使用div包裹,則在 瀏覽器渲染時會多出多餘的div標籤,而使用碎片於瀏覽器渲染時不會有該標籤的顯示 */ 从“/TodoItem”导入TodoItem； //將子組件引入 类TodoList扩展组件{ 构造函数（）{ 超级（）； 这个州={//當組件中的状态或道具發生改變時,提供函式就會重新執行 inputValue:“你好”， 名单：[] }; this.inputValueChange=this.inputValueChange.bind（this）；/*bind（this）綁定函數的作用域 */ this.addList=this.addList.bind（this）； this.delList=this.delList.bind（this）； } render（）{ console.log（'todoList test'）； 返回( 按鈕 {this.getTodoItem（）} ); }

质量保证： 大家好~ 我在如何避免重新渲染上有点麻烦。 我发现在状态改变后渲染函数会执行两次。

---

如何改善这种情况以及为什么会发生此事件？

由于以下原因，您的应用程序可能会呈现两次。您可以禁用此设置：

检查您的

应用程序是否被index.js中的
包装：

ReactDOM.render(
{app}
,
document.getElementById（'root'））
);

如果是这样，您可以通过删除
标记来禁用StrictMode：

ReactDOM.render(
{app}，
document.getElementById（'root'））
);
在该代码中，没有任何内容可以提供有关问题的信息。如果正在更新您的状态或父组件，则只需调用this.getTodoItem（）函数。
import React from 'react';
import {Component} from 'react';
/*
import {Component} from 'react';等同於
import React from 'react';
const Component=React.Component;
*/
import {Fragment} from 'react';
/*
Fragment為佔位符,使用他的原因是因為JSX語法僅能接受一個tag包裹所有其他tag,若是使用div包裹,則在
瀏覽器渲染時會多出多餘的div標籤,而使用Fragment於瀏覽器渲染時不會有該標籤的顯示
*/
import TodoItem from './TodoItem';
//將子組件引入

class TodoList extends Component{
    constructor(){
        super();
        this.state={//當組件中的state或props發生改變時,render函式就會重新執行
            inputValue:'hello there',
            list:[]
        };
        this.inputValueChange=this.inputValueChange.bind(this);  /* bind(this)綁定函數的作用域 */
        this.addList=this.addList.bind(this);
        this.delList=this.delList.bind(this);
    }
    render(){
        console.log('todoList test');
        return(
        <Fragment>
            <input 
                value={this.state.inputValue}//在JSX語法中使用JS的表達式(變數或方法)時需要用{}包裹,像input/ul等皆為JSX一般語法
                onChange={this.inputValueChange}            
            />
            <button onClick={this.addList}>按鈕</button>
            <ul>
                {this.getTodoItem()}               
            </ul>
        </Fragment>
        );
    }