作为参数传递的 Javascript 函数未执行

问：

我有一个 App.jsx，声明了一个常量和 setState 例程。我把 setState 放在一个函数 （update_word_list） 中。我将函数传递给一个子组件。console.log 将 typeof 参数打印为“函数”，函数本身的打印显示函数在子组件中被解释。该函数不执行。

我是 Javascript 的新手。如果我在做一些愚蠢的事情，我深表歉意（不用说......

下面有很多代码，所以我希望这描述了 WordsSample.jsx 中问题的本地化。概述/摘要操作：App.jsx：

1. 声明变量和 setState： const [word_list， setWord_List] = useState（[“1”， “2”]）
2. 定义包含 setState 的函数（注意：console.log 作为第一个语句）：function **Update_Word_List** (word_list) { console.log("Update word list inside app.js + word_list") setWord_List(word_list={word_list}) return (word_list) }
3. 将匿名函数传递给子组件：<WordSample word_list={word_list} dowords={（）=>Update_Word_List}/>

WordsSample.jsx

1. 将 props 传递给 SendSample 函数 onClick： <button type=“submit” onClick={（）=>SendSample（props）} name=“genwords” id=“genword”>Names
2. 将道具接收到 SendSample、console.log typeof（识别为函数）和 function（识别为函数调用？？）：

function SendSample( props ) {
    console.log("Props value: " + typeof(props.dowords))
    console.log("Props value: " + props.dowords)

3. 问题是什么!!尝试执行函数：props.dowords（strwords）。
4. 本地化：console.log函数应该已经执行之后：console.log（“理论上我们已经完成了函数” + props.word_list） 笔记：

• 该函数应该更改了初始props.word_list值，该值保持不变。
• 函数调用是在从 axios.post 返回之后进行的。axios.post 已经工作，并提供了 200 http 返回，并且我有 console.log 以确保已返回数据。

控制台日志：

周边代码：

import './App.css';
import ControlS from './Controls'
import WordSample from './WordsSample'
import List_Words from './List_Words';
import {useState, useEffect} from 'react'


function App() {

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

  function update_word_list (word_list)  {
    console.log("Update word list inside app.js  + word_list")
    setWord_List(word_list={word_list})
    return (word_list)
  }


  useEffect (() => {
    <App />
  }, []);
  

  
  return (
    <div className="App">
      <ControlS />
      <WordSample word_list={word_list} dowords={()=>update_word_list}/>
      <List_Words word_list={word_list}/>

Word_Sample子组件。笔记： 带有 props Word_sample调用函数 sendSample 中的按钮。

import React, {useEffect, useState} from 'react';
import endPoints from './api';
import axios from 'axios';

export default function WordSample(props) {

    let [sample, setWordSample] =  useState("")

    useEffect(() => {
        loadSample()
    }, [])

const loadSample = async () => {
    const data = await endPoints.sample();
    setWordSample(sample=data)
}


function sendSample( props ) {
    console.log("Props value: " + props.dowords)

    let send = {}
    send['words'] =  sample

    axios.defaults.headers.post['Access-Control-Allow-Origin'] = "*";

    axios.post('/genwords', send, {
         headers: {
           'Content-Type': 'application/json',
         }
       }).then(res => {
            // console.log("Response words:" + JSON.stringify(res.data))
            let strwords = JSON.stringify(res.data)
            strwords = strwords.split(",")
            props.dowords(strwords)
            console.log("In theory we have done the function" + props.word_list)

            // word_list.forEach((word, i)=>console.log(word))
       }).catch(err=>console.log("Error found:  " + err))

       return(
        <>
        <h2>Literal</h2>

        </>
       )

    }
    

    return (
        <div className="wordsample">
            
                <div className="ctlheader">
                    <h1>Word Sample</h1>
                </div>
                <p>Type (or paste) the word sample that you would like to generate sci-fi names from</p>
            <form id="form" method="POST">
                <textarea placeholder={sample} id="word" name="words" required
                onChange={(e)=>setWordSample(sample=e.target.value)}></textarea>
                <br />
                <button type="submit" onClick={()=>sendSample(props)} name="genwords" id="genword">Names</button>
            </form>                  
        </div>
    )
}