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

Question

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

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

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

1. 声明变量并设置状态： 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. 将匿名函数传递给子组件：Update_Word_List}/>

WordsSample.jsx

1. 将 props 通过 onClick 的 SendSample 函数传递： SendSample(props)} name="genwords" id="genword">Names
2. 将 props 接收到 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.logged 以确保数据已返回。

周边代码：

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 子组件。笔记： Word_sample 中的按钮使用 props 调用函数 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>
    )
}

Answer 1

各位，

我已经破解了这个 - 并不完全令我满意。很简单，我直接传递setState函数：

我想我很困惑：

1. 为什么这么多文档表明这是一个坏主意（这让我感到不舒服，因为它仍然是！！！）。
2. 为什么这与传递任何其他函数作为参数不同......

所以仍然有些神秘。如果我触底的话我会更新。现在：感谢您的善意帮助，我不想让其他人花时间在这上面。特别感谢https://stackoverflow.com/users/5053002/jaromanda-x！！