Question

选中该复选框后，从业者的姓名将被推送到namesArray中。然后，我执行了namesArray.toString（）并将其设置为变量“名称”。但是它不会渲染...我该如何解决？

let names = '';

    const selectPractitioners = () => {
        let namesArray = [];
        practitioners.forEach(pract => {
            if (pract.select) {
                namesArray.push(pract.displayName)
            }
        })
        names = namesArray.toString();
        console.log(names)
    };

 return (
        <div className="lists-container">

            <div className="practitioners-list">
                {practitioners.map(pract =>
                    <p key={pract.id} >
                        <input type="checkbox"
                            onChange={e => {
                                let value = e.target.checked;
                                setPractitioners(
                                    practitioners.map(pract => {
                                        pract.select = value;
                                        return pract;
                                    })
                                )
                            }}
                        />
                        {pract.displayName}
                    </p>)}
                <button onClick={() => { selectPractitioners() } } >Select Practitioners</button>
               
                        <p> These are the working practitioners: { names } </p>

            <div/>

Answer 1

您必须为此设置状态

尝试这样的事情：

import React, { useState} from 'react'


const Example = () => {
    const [names, setNames] = useState("");

    const selectPractitioners = () => {
        let namesArray = [];
        practitioners.forEach(pract => {
            if (pract.select) {
                namesArray.push(pract.displayName)
            }
        })
        setNames(namesArray.toString());
        console.log(names)
    };

...

反应：为什么变量“名称”不显示在渲染器中？

1 个答案: