Javascript 由于错误使用状态,数组未动态更新
单击单选按钮时,它会将值从0更改为1,反之亦然。 这是通过两个组件Test.js和Graph_Test.js完成的。 Test.js是创建单选按钮和填充数组的地方。例如,当按下单选按钮1时,我希望它将数组[1]中的值从0更改为1或从1更改为0。 因此,只要按下一个单选按钮,它就会动态地改变阵列。 然后使用该数组在graph_Test.js中构建一个图,这取决于哪个索引旁边有1个值,它将在图上生成相应的行。 例如,如果数组=[0,1,0,0],将为区域1绘制一条线。 当这个数组动态变化时,图上的线也会随之变化 我正在测试我的代码。在Graph_测试中,我将它输出数组[0],当触摸单选按钮[0]时,该值应更新。然而,这并没有发生 在test.js中,我使用了状态,这就是我的问题所在,因为初始数组作为道具被传递,但它不是动态更新的 Graph_test.js有两个道具,通过数组和测试发送,稍后将使用测试构建图形。但目前不需要 我尝试了很多次,但仍然没有取得任何进展,我们非常感谢/需要任何帮助 代码: Test.js:Javascript 由于错误使用状态,数组未动态更新,javascript,node.js,json,reactjs,state,Javascript,Node.js,Json,Reactjs,State,单击单选按钮时,它会将值从0更改为1,反之亦然。 这是通过两个组件Test.js和Graph_Test.js完成的。 Test.js是创建单选按钮和填充数组的地方。例如,当按下单选按钮1时,我希望它将数组[1]中的值从0更改为1或从1更改为0。 因此,只要按下一个单选按钮,它就会动态地改变阵列。 然后使用该数组在graph_Test.js中构建一个图,这取决于哪个索引旁边有1个值,它将在图上生成相应的行。 例如,如果数组=[0,1,0,0],将为区域1绘制一条线。 当这个数组动态变化时,图上的线
// When radio buttons checked, change corresponding value in array if 0 change to 1 and if 1 change to 0
// This will be used in the graph component, and will enable the functionality of selcting one region or multiple region.
// As the graph will be plotted based on which regions are noted 1 in the array
import $ from "jquery";
import Graph_Test from "./Graph_Test.js";
import React, { useState } from "react";
const Test = props => {
const total_regions = (JSON.parse(JSON.stringify(props.test)).length); // gets the number of regions
const [array, setArray] = useState(Array(total_regions.length).fill(0));
//when a radio button is clicked change its corresponding in the array
//when a radio button is clicked change its corresponding in the array
const handleClick = (item, idx) => {
if (array[idx] == 1) {
array[idx] = 0;
} else {
array[idx] = 1;
}
setArray(array);
};
return ( // displays radio buttons depending on the number of objects in json
<div>
<div>
<Graph_Test testing={[]} arrays={array}/>
</div>
<div>
{props.test.map((item, idx) => {
return (
<label key={idx}>
<input className="region" type="radio" value={idx} onClick={() => handleClick(item, idx)}/>
<span>{idx}</span>
</label>
);
})}
</div>
</div>
);
};
export default Test;
Graph_Test.js
import React from 'react';
import $ from "jquery";
//<h1>{props.testing.map}</h1>
const Graph_Test = props => {
return(
<div>
<div>
{props.arrays && props.arrays.length > 0 && <p>{props.arrays[0]}</p> }
</div>
</div >
);
};export default Graph_Test;
App.js
import "bootstrap/dist/css/bootstrap.css";
import React from "react";
import ReactPlayer from 'react-player'
import LeftPane from "./components/LeftPane.js";
import Video from "./components/Video.js";
//import Footer from "./components/Footer.js";
import Test from "./components/Test.js";
import Graph_Test from "./components/Graph_Test.js";
//import './App.css';
class App extends React.Component {
constructor(props) {
super(props);
this.state = { apiResponse: [] };
this.state = {
clicked: "no"
};
}
// Comunicate with API
callAPI() {
fetch("http://localhost:9000/IntensityAPI") //React app talks to API at this url
.then(res => res.json())
.then(res => this.setState({ apiResponse: res }));
}
handleClick = () => {
this.setState({ ...this.state, isClicked: "yes" });
console.log("clicked");
};
componentWillMount() {
this.callAPI();
}
render() {
return (
<div className="App">
<div class="row fixed-top fixed-bottom no-gutters" >
<div class="col-3 fixed-top fixed-bottom">
<LeftPane></LeftPane>
</div>
<div class="offset-md-3 fixed-top fixed-bottom" >
<Video></Video>
</div>
<div class=" col-3 fixed-bottom">
<Test test = {this.state.apiResponse} handler={this.handleClick}/>
<Graph_Test testing = {this.state.apiResponse} arrays={[]} {...this.state}/>
</div>
</div>
</div>
);
}
}
export default App;
// <Footer test = {this.state.apiResponse}/>
AFAIK React不会执行与状态的深度比较,因此,由于您正在重用已经存在的数组,因此它具有与前一个数组相同的内存引用 试着这样做:
const handleClick = (item, idx) => {
const newArray = [...array]
if (newArray[idx] == 1) {
newArray[idx] = 0;
} else {
newArray[idx] = 1;
}
setArray(newArray);
};