如何将Flask返回的数组传递到React并正确渲染？

你的React代码里存在一个明显的逻辑错误：data状态是一个包含lst属性的对象，但渲染时你直接用data[0]去访问数组元素——这根本找不到数据，因为data不是数组，而是{ lst: [] }结构的对象。

下面给两种修正方案，按需选择：

方案1：适配现有状态结构修改渲染逻辑 #

如果不想改动状态的定义方式，只需要调整JSX部分的访问路径，同时可以遍历数组展示所有数据：

function App() {
    
  const [data, setdata] = useState({
    lst: [],
  });

  useEffect(() => {
    fetch("/data").then((res) =>
      res.json().then((data) => {
        console.log(data);
        setdata({
          lst: data,
        });
      })
    );
  }, []);

  const handleButtonClick = () => {
    fetch("/data").then((res) =>
      res.json().then((data) => {
        console.log('Button clicked!');
        setdata({
          lst: data,
        });
        console.log(data);
      })
    );
  };


  return (
    <div className="App">
        {/* 展示第一个数据项 */}
        <p>第一个数据：{data.lst[0]}</p>
        {/* 遍历展示所有数据 */}
        <div>
          {data.lst.map((item, index) => (
            <p key={index}>数据{index+1}：{item}</p>
          ))}
        </div>
        <button onClick={handleButtonClick}>刷新数据</button>
    </div >
  );
}

export default App;

方案2：简化状态为数组（更推荐） #

既然后端返回的本身就是数组，没必要把状态包装成对象，直接用数组作为state类型，代码逻辑会更简洁：

function App() {
  // 直接初始化空数组作为状态
  const [dataList, setDataList] = useState([]);

  useEffect(() => {
    fetch("/data")
      .then(res => res.json())
      .then(data => {
        console.log(data);
        setDataList(data);
      });
  }, []);

  const handleButtonClick = () => {
    fetch("/data")
      .then(res => res.json())
      .then(data => {
        console.log('Button clicked!');
        setDataList(data);
        console.log(data);
      });
  };


  return (
    <div className="App">
        {/* 展示第一个数据项 */}
        <p>第一个数据：{dataList[0]}</p>
        {/* 遍历展示所有数据 */}
        <div>
          {dataList.map((item, index) => (
            <p key={index}>数据{index+1}：{item}</p>
          ))}
        </div>
        <button onClick={handleButtonClick}>刷新数据</button>
    </div >
  );
}

export default App;

关键说明 #

• 两种方案都添加了数组遍历的逻辑，用map生成每个数据项的DOM元素，注意必须给每个子元素加唯一的key属性（这里用索引代替，实际项目中如果有唯一ID最好用ID）。
• 方案2的状态结构更贴合后端返回的数据格式，后续维护起来更省心。

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