Javascript 反应：第一次后数组未按正确顺序渲染

第一次渲染阵列时，它的顺序是正确的，但是，如果更改，渲染顺序将保持不变

例如：

construct() {

    this.state = {
        test_array: [1,2,3,4]
    }

    let self = this;

    setTimeout(function(){
        self.scramble();
    }, 5000);
}


scramble() {
    this.state.test_array = [3,1,2,4];
    this.setState(self.state);
}

render() {

    this.state.test_array.forEach(function(item){
       console.log(item);
    });

    return (
        <div>

            {this.state.test_array}

        </div>
    );
}

---

你知道为什么不能按正确的顺序渲染吗？

你很接近了。以下是我为修复它而做的一些更改：

construct

应该是

constructor

您始终需要调用

super（）

，作为构造函数的第一行。（你真的不必担心这个，这是一个面向对象的东西；如果你好奇的话，用谷歌搜索一下）

使用“箭头函数”而不是“关键字函数”或

.bind（this）

来防止

this

更改上下文

不要修改此状态。；如果希望更改，请始终调用

this.setState

类OrderThing扩展React.Component{ 构造函数（）{ 超级（） 此.state={ 测试_阵列：[1,2,3,4] } 设置超时（（）=>{ 这个是cramble（）； }, 5000); } 扰码{ 这是我的国家({ 测试_阵列：[3,1,2,4] }); } render（）{ this.state.test\u array.forEach（函数（项）{ 控制台日志（项目）； }); 返回( {this.state.test_数组} ); } } const div=document.createElement（'div'） document.body.appendChild（div） ReactDOM.render（，div）

---

你们非常接近。以下是我为修复它而做的一些更改：

construct

应该是

constructor

您始终需要调用

super（）

，作为构造函数的第一行。（你真的不必担心这个，这是一个面向对象的东西；如果你好奇的话，用谷歌搜索一下）

使用“箭头函数”而不是“关键字函数”或

.bind（this）

来防止

this

更改上下文

不要修改此状态。；如果希望更改，请始终调用

this.setState

类OrderThing扩展React.Component{ 构造函数（）{ 超级（） 此.state={ 测试_阵列：[1,2,3,4] } 设置超时（（）=>{ 这个是cramble（）； }, 5000); } 扰码{ 这是我的国家({ 测试_阵列：[3,1,2,4] }); } render（）{ this.state.test\u array.forEach（函数（项）{ 控制台日志（项目）； }); 返回( {this.state.test_数组} ); } } const div=document.createElement（'div'） document.body.appendChild（div） ReactDOM.render（，div）

---

这里有一些建议

首先，js中没有

construct（）

，但是有

constructor（）

其次，您应该始终使用props作为构造函数中的参数调用super方法，如下所示：

constructor(props) {
    super(props);
    ...
}

最后，react开发者强烈建议只使用

setState（）

方法修改状态。 所以你应该重写你的置乱方法

scramble() {
    this.setState({test_array: [3,1,2,4]});
}

---

这些更改应该会对您有所帮助。

这里有一些建议

首先，js中没有

construct（）

，但是有

constructor（）

其次，您应该始终使用props作为构造函数中的参数调用super方法，如下所示：

constructor(props) {
    super(props);
    ...
}

最后，react开发者强烈建议只使用

setState（）

方法修改状态。 所以你应该重写你的置乱方法

scramble() {
    this.setState({test_array: [3,1,2,4]});
}

---

这些更改应该会对您有所帮助。

确定-吸取的教训：不要忽略控制台中的键警告：“警告：数组或迭代器中的每个子级都应该有一个唯一的“键”属性。请参阅：了解解决方案。确定-吸取的教训：不要忽略控制台中的键警告：“警告：数组或迭代器中的每个子级都应该有一个唯一的”键“道具。”参见：了解解决方案。