如何将数组发送到 React 中的子组件？

Question

我想将数组 inputArrival 和 inputBurst 发送到子组件 Barchart.js。但是每当我这样做时，只会发送我输入的第一个元素，而不是其他项目。基本上我想要的是，当数据被输入到 Entrytable.js 时，它会立即得到反映。 EntryTable.js

import React,{useState} from 'react';
import './tableEdit.css';
import Barchart from './Barchart';

const EntryTable = (props) => {
    const entry = props.numOfEntries;
    const [inputArrival, setInputArrival] = useState(Array(entry).fill(""));
    const [inputBurst, setInputBurst] = useState(Array(entry).fill(""));
  
  
    function changeArrival(index) {     
      return (e) => {
       setInputArrival((values) =>
          values.map((value, i) => (i === index ? e.target.value : value)));};
    }
    function changeBurst(index) {
      return (e) => {  
     setInputBurst((values) =>
          values.map((value, i) => (i === index ? e.target.value : value))         
        );
      };
    }
    const ArrayEntry = Array.from({ length: entry}).map((_, i) => (
      <tr key={i}>
          <td >P{i}</td>
          <td >
            <input            
              type="number"
              value={inputArrival[i]}
              onChange={changeArrival(i)}             
            />
            ms
          </td>
          <td >
            <input            
              type="number"
              value={inputBurst[i]}
              onChange={changeBurst(i)}            
            />
            ms
          </td>
        </tr>
    ));
     return (
      <div  c>
        <table>
          <thead>
            <tr>
              <th>Process</th>
              <th>Arrival Time</th>
              <th>Burst Time</th>
            </tr>
          </thead>
          <tbody>{ArrayEntry}</tbody>
        </table>
        <button>Click Me</button>
        <Barchart selected_val={entry} arrivalArray={inputArrival} ></Barchart>
      </div>
    );
  };
export default EntryTable

Barchart.js

import React,{useState,useEffect} from 'react'
const Barchart=(props)=>{    
  const sel = props.selected_val; 
 var ar1=props.arrivalArray;
 console.log(ar1);
}export default Barchart;

Answer 1

据我所知，我不确定问题出在哪里：

• 我做了什么？

首先：正如 Tasos 所说，将所有变量转换为let；

第二个：为const entry分配了一个值5 image here

第三：为你想要的另一个数据数组添加了一个prop，并将其传递给子组件Barchart.js； image here

结果如下： image here

Answer 2

运行你的代码，即使你有一些改进要添加到它，除此之外它似乎工作。

唯一的区别是在Barchart.js 中返回一些东西。也许尝试在Barchart.js 中返回null，它可能会抛出一个静默错误。

我建议也使用 linter 进行代码样式设置。