React函数组件间传值异常：InputBar输入无法更新ListItems列表

问题根源 #

1. InputBar组件逻辑错误：<ListItems enteredInput = {userInput}> 写在return语句之外，这行代码不会生效，ListItems组件根本没有被正确渲染挂载，自然无法接收传值也不会展示。同时你按下回车后直接清空了userInput，就算传值也只会传递空字符串。
2. ListItems组件状态逻辑错误：
   • 初始阶段props.enteredInput为undefined，你直接将其生成的对象push进数组，就会出现{name: undefined}的空项
   • 列表数据data直接写在组件函数体内，每次组件渲染都会重新初始化。且useState的初始值仅在组件第一次挂载时生效，后续props变化不会触发items状态更新，自然不会渲染新内容。

正确实现方案 #

采用状态提升方案：将购物车列表的状态放在两个组件的公共父组件中维护，InputBar负责提交新条目更新父状态，ListItems接收父组件传递的列表状态直接渲染即可。

1. 公共父组件示例（比如App.js） #

import React, { useState } from 'react'
import InputBar from './input_bar/input_bar'
import ListItems from './list_items/list_items'

function App() {
  // 列表状态放在父组件维护
  const [items, setItems] = useState([{name : "Kitkat 10"}, {name : "Kitkat 10"}, {name : "Kitkat 10"}, {name : "Kitkat 10"}, {name : "Kitkat 10"}])

  // 接收InputBar提交的新条目，更新列表
  const addNewItem = (newItemName) => {
    if(newItemName.trim()) { // 过滤空输入
      setItems(prev => [...prev, {name: newItemName}])
    }
  }

  return (
    <div className="App">
      <InputBar onAddItem={addNewItem} />
      <ListItems items={items} />
    </div>
  )
}

export default App

2. 修正后的InputBar组件 #

import React,{ useState } from "react";
import "./input_bar.css";

const InputBar = (props) => {
  const[userInput, setInput] = useState('');

  const handleKeyPress = (e) => {
    if(e.key === "Enter") {
      // 提交新条目到父组件
      props.onAddItem(userInput)
      // 清空输入框
      setInput('');
    }
  }

  const handleChange = (e) => {
    setInput(e.target.value);
  }

  return(
    <div>
      <input 
        type="text" 
        id="userInput" 
        placeholder="Add Shopping Item" 
        value={userInput} 
        onChange={handleChange} 
        onKeyPress={handleKeyPress}
      />
    </div>
  );
}

export default InputBar;

3. 修正后的ListItems组件 #

import React from "react";
import "./list_items.css";

const ListItems = (props) => {
  return(
    <div>
      {props.items.length === 0 ? 
        <p>No Items Added</p> : 
        props.items.map((item, index) => 
          <div key={index} className="list_items">
            {item.name}
            <button className="x_button">X</button>
            <button className="purchase_button">Purchase</button>
          </div>
        )
      }
    </div>
  );
}

export default ListItems;

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