React子组件中传入的function参数无法执行问题排查

核心问题1：父组件传递函数的方式错误 #

你在传递dowords时用了()=>update_word_list，这相当于传了一个返回update_word_list函数引用的匿名函数，而非直接传递update_word_list本身。子组件调用props.dowords(strwords)时，只是拿到了update_word_list的引用，并没有真正执行它。

核心问题2：setState调用语法错误 #

setWord_List(word_list={word_list})是错误写法，这会把对象{word_list: word_list}赋值给状态，但你的word_list原本是数组类型，会导致状态类型混乱，无法正常更新。

额外优化点：子组件函数参数冗余 #

sendSample不需要把props作为参数传入，直接使用组件接收的props即可（假设sendSample是WordSample组件内部定义的函数）。

修正后的代码 #

App.jsx

const [word_list, setWord_List] = useState(["1", "2"])

function update_word_list(newWordList) {
    console.log("Update word list inside app.js: ", newWordList)
    // 直接传入新数组更新状态，保持数组类型一致
    setWord_List(newWordList)
}

return (
    <div className="App">
      {/* 直接传递update_word_list函数，让子组件能直接调用 */}
      <WordSample word_list={word_list} dowords={update_word_list}/>
    </div>
)

WordSample.jsx

// 直接使用组件接收的props，无需作为函数参数传入
function sendSample() {
    axios.post('/genwords', send, {
         headers: {
           'Content-Type': 'application/json',
         }
       }).then(res => {
            let strwords = JSON.stringify(res.data).split(",")
            // 调用父组件传递的更新函数，传入处理后的数组
            props.dowords(strwords)
            console.log("当前word_list状态: ", props.word_list)
       })
}

补充说明 #

如果需要在传递函数时额外处理参数（比如追加固定元素），可以用箭头函数包裹：

<WordSample dowords={(newList) => update_word_list([...newList, "固定元素"])} />

另外，状态更新要遵循不可变性原则，如果是基于原有状态修改，应创建新数组，比如追加元素时用setWord_List(prev => [...prev, ...newWordList])。

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