React组件间数据传递：如何将App.js的stocksName传给Stocks.js

1. 在父组件App.js中传递props #

你需要将stocksName作为props显式传递给StocksView组件，修改App.js的return部分：

// App.js 中的return片段
<div>
  <form onSubmit={handleSubmit}>
    {/* 原表单代码不变 */}
  </form>
  <div>
    {/* 传入stocksName作为props */}
    <StocksView stocksName={stocksName} />
  </div>
</div>

2. 在子组件Stocks.js中接收并使用props #

子组件需要先接收传入的props，再正确处理数据格式，同时注意你导入的是Graph组件，而非Stocks：

import React from 'react'
import Graph from 'react-vis-network-graph'

// 解构接收props中的stocksName
export default function StocksView({ stocksName }) {
    // 将stocksName数组转换为Graph组件所需的节点格式
    const stocks = {
        nodes: stocksName.map(stock => ({
            id: stock,
            label: stock
        }))
    }
    
    return (
        <div className='container'>
            {/* 使用导入的Graph组件，传入处理好的stocks数据 */}
            <Graph graph={stocks} />
        </div>
    )
}

额外注意事项 #

• 初始状态下stocksName是空数组，map方法不会报错，若需要可添加加载状态提示
• 确保后端返回的nodeData.STOCKS_NAME是数组类型，若格式不符需先做类型校验与转换

内容的提问来源于stack exchange，提问作者Shivayan Mukherjee