Question

我是React开发的新手，我有一个react应用程序，其中componentDidMount上将value的状态设置为“ add”，并且将div内容呈现为“ add”，然后单击add div上的按钮，调用addstate方法在哪里将值的状态设置为“ edit”，并相对于“ edit”呈现div内容，在哪里我通过完成方法调用再次调用addstate方法。

在这种情况下，从addstate方法进行的提取调用正在进行到后端，但是状态没有设置回Edit..it仅在IE11中失败。它适用于chrome，firefox和移动设备。如果我在addstate方法中删除一段代码“ Value：edit”，它的工作效果很好。但是我的要求需要根据不同的场景进行渲染。因此基本上只能在IE11中设置一次结果状态。它不会反复工作。

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: "test",
            items: []
        }

    };

    addState() {
        fetch("/local/addThings").then(res => res.json())
            .then(
                (result) => {
                    this.setState({
                        value: "edit",
                        items: result
                    });
                   }
            )
            .catch(error => console.error('Error:', error));
    }

     done() {
          this.setState({
               value: "add"                     
              });

             }
    componentDidMount() {

        fetch("/local/getThings")
            .then(
                (result) => {
                       this.setState({
                            value: "add"
                        });

                }
            )
            .catch(error => console.error('Error:', error)); 

    }

    render() {
        const { value, items } = this.state;

        if (value === "add") {
            return <div >
                <div >
                    <ul >
                        <li onClick={() => this.addState()}>
                            <div>
                                <img src="Add.png" />
                                <center><p>AddButton</p></center>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
                ;
        }
        if (value === "edit") {
            return (<div>
                <div >
                    <ul >
                        <li onClick={() => this.done()}>
                            <div >
                                <img src="Save.png" />
                                <center><p>SaveButton</p></center>
                            </div>
                        </li>
                         {items.map(item => (
                                      <center><p>{item.name}</p></center>

                                </li> 
                            ))}
                   </ul>

                </div>
            </div>

            );
        }

        }

}
ReactDOM.render(React.createElement(App, null), document.getElementById("details")); ```

Answer 1

尝试绑定您的方法，并在您的onClick事件中直接引用它：

lass App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: "test",
            items: []
        }
        this.addState = this.addState.bind(this);

    };

    addState() {
        fetch("/local/addThings").then(res => res.json())
            .then(
                (result) => {
                    this.setState({
                        value: "edit",
                        items: result
                    });
                   }
            )
            .catch(error => console.error('Error:', error));
    }

     done() {
          this.setState({
               value: "add"                     
              });

             }
    componentDidMount() {

        fetch("/local/getThings")
            .then(
                (result) => {
                       this.setState({
                            value: "add"
                        });

                }
            )
            .catch(error => console.error('Error:', error)); 

    }

    render() {
        const { value, items } = this.state;

        if (value === "add") {
            return <div >
                <div >
                    <ul >
                        <li onClick={this.addState}>
                            <div>
                                <img src="Add.png" />
                                <center><p>AddButton</p></center>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
                ;
        }
        if (value === "edit") {
            return (<div>
                <div >
                    <ul >
                        <li onClick={() => this.done()}>
                            <div >
                                <img src="Save.png" />
                                <center><p>SaveButton</p></center>
                            </div>
                        </li>
                         {items.map(item => (
                                      <center><p>{item.name}</p></center>

                                </li> 
                            ))}
                   </ul>

                </div>
            </div>

            );
        }

        }

}

Answer 2

我在方法中添加了settimeout，它在IE中有效。似乎IE中API调用的响应速度较慢。不确定是否有解决方法，或者这是正确的方法。

        fetch("/local/addThings").then(res => res.json())
            .then(
                (result) => {
                 setTimeout(() => {
                    this.setState({
                        value: "edit",
                        items: result
                    });
                     }, 200);
                       }
            )
            .catch(error => console.error('Error:', error));
    }```

调用渲染后，React setstate在IE11中不起作用

2 个答案: