Javascript 道具不动态更新

单击单选按钮（Test.js中编码的一组按钮）时，将执行名为handleclick的函数。在本文中，我更新了数组，但无法将其重新发送到graph_test.js。因此，graph_test.js接收填充了0的初始数组，但从未接收更新版本。
我想要的是一个0和1的数组，每个索引代表一个区域。单击按钮时，0/1变为相反的值。
我需要这个动态更新，就像在graph_test.s中一样，我将根据数组中的哪些索引旁边有1来编码图形上的行。 Test.js-我在其中填充、创建和更新数组

// 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 array={array} testing={[]} />
    </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;

//选中单选按钮时，如果0变为1，如果1变为0，则更改数组中相应的值
//这将在图形组件中使用，并将启用选择一个区域或多个区域的功能。
//因为图形将根据阵列中标注为1的区域绘制
从“jquery”导入$；
从“/Graph_Test.js”导入Graph_测试；
从“React”导入React，{useState}；
常量测试=道具=>{
const total_regions=（JSON.parse（JSON.stringify（props.test））.length）；//获取区域数
const[array，setArray]=useState（数组（total_regions.length）.fill（0））；
//单击单选按钮时，更改其在数组中的对应位置
//单击单选按钮时，更改其在数组中的对应位置
常量handleClick=（项目，idx）=>{
if（数组[idx]==1）{
数组[idx]=0；
}否则{
数组[idx]=1；
}
集合数组（数组）；
};
返回(
//根据json中对象的数量显示单选按钮
{props.test.map（（item，idx）=>{
返回(
handleClick（项目，idx）}/>
{idx}
);
})}  
);
};
导出默认测试；

调用数组的图\u测试：

import React from 'react';
import $ from "jquery";
//<h1>{props.testing.map}</h1>
const Graph_Test = props => { 
  console.log(`ARRRAy ${props.array.length}`);
    return(
      <div>
        <div>
        {props.array && props.array.length > 0 && <p>{props.array[0]}</p> }
        </div>     
        <div>
        {props.testing && props.testing.map((item, idx) => { 
          return (
            <label key={idx}>
              <input className="region" type="radio" value={idx} />
              <span>{idx}</span> 
            </label>
          );
        })}  
        </div>
      </div >
    );
  };export default Graph_Test;

从“React”导入React；
从“jquery”导入$；
//{props.testing.map}
常量图_Test=props=>{
log（`ARRRAy${props.array.length}`）；
返回(
{props.array&&props.array.length>0&{props.array[0]}
}
{props.testing&&props.testing.map（（item，idx）=>{
返回(
{idx}
);
})}  
);
};导出默认图_测试；

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: [] };

  }
  // 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 }));
  }
  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}/>
            <Graph_Test testing = {this.state.apiResponse} array={[]}  />

            </div>      
            </div>

      </div>
    );
  }
}
export default App;
//  <Footer test = {this.state.apiResponse}/>

import“bootstrap/dist/css/bootstrap.css”；
从“React”导入React；
从“react player”导入react player
从“/components/LeftPane.js”导入LeftPane；
从“/components/Video.js”导入视频；
//从“/components/Footer.js”导入页脚；
从“/components/Test.js”导入测试；
从“/components/Graph_Test.js”导入Graph_测试；
//导入“/App.css”；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={apiResponse:[]}；
}
//与API通信
callAPI（）{
取回（“http://localhost:9000/IntensityAPI“”//React应用程序在此url与API对话
.then（res=>res.json（））
.then（res=>this.setState（{apiResponse:res}））；
}
组件willmount（）{
这是callAPI（）；
}
render（）{
返回(
);
}
}
导出默认应用程序；
//  

我已经生成了一个沙盒。您可以看到0，因此当按下单选按钮时，我希望它变为0，然后再次按下时，我希望它变回1。这是美国的做法吗？也可以忽略第一行单选按钮，只需将其放在那里进行测试，就可以在下一行使用它

---

您的codesandbox返回一个获取错误，但您是对的：通过实现两个组件之间使用的常规状态，

handleClick

更新也将正确反映在

graph\u test

如果它们是同级，则将状态提升到父组件，并且应该这样做。例如：

class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isClicked: false
    };
  }

  handleClick = () => {
    this.setState({ ...this.state, isClicked: !this.state.isClicked });
  };

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Click</button>
      </div>
    );
  }
}

export default Example;

类示例扩展组件{
建造师（道具）{
超级（道具）；
此.state={
isClicked:错误
};
}
handleClick=（）=>{
this.setState（{…this.state，isClicked:！this.state.isClicked}）；
};
render（）{
返回(
点击
);
}
}
导出默认示例；

---

并将此状态传递给您希望在中使用它的任何其他子组件

Thank you@Slimcody，我已经将其弄糟了，但正在与状态斗争您能给我一个示例吗添加了一个简单的示例。还有一个类似的问题，有更详细的代码不，你不需要兄弟姐妹中的构造函数，它们也可以是简单的无状态功能组件（但别忘了将道具作为输入传递给它们）。我为你制作了一个简化的沙盒，你可以看到它在工作，你可以更新它以满足你的需要不，它按原样工作，它被称为扩展运算符，基本上是复制一个元素并在末尾添加新项。对于简化的沙箱，它是不需要的，但是如果您在您的状态中存储了更多的信息，那么应该使用它来不覆盖其余的信息