Question

我想制作一个可以保存简短文本条目的小应用程序。该应用程序显示所有已发布的条目，用户可以通过编写和发布它来添加新条目。

应用程序具有string-array (string[])类型。数组中的每个项目都是一个条目，必须在前端条目列表中显示。

我知道我不能push到数组，因为那不能直接改变状态（并且react并没有注意到它必须被重新渲染）。因此，我正在使用这种方式来获取新状态：oldState.concat(newEntry)。但是React不会重新渲染它。

这是我的整个反应代码：

function App() {
    const [entries, setEntries] = useState([] as string[])

    const publish = (entry: string) => {
        setEntries(entries.concat(entry))
    }

    return (
        <div>
            <Entries entries={entries} />
            <EntryInput publish={publish} />
        </div>
    )
}

function Entries(props: { entries: string[] }) {
    return (
        <div className="entries">
            {props.entries.map((v, i) => { <EntryDisplay msg={v} key={i} /> })}
        </div>
    )
}

function EntryInput(props: { publish: (msg: string) => void }) {
    return (
        <div className="entry-input">
            <textarea placeholder="Write new entry..." id="input-new-entry" />
            <button onClick={(e) => { props.publish((document.getElementById("input-new-entry") as HTMLTextAreaElement).value) }}>Publish</button>
        </div>
    )
}

function EntryDisplay(props: { msg: string }) {
    return (
        <div className="entry">{props.msg}</div>
    )
}

const reactRoot = document.getElementById("react-root")
ReactDOM.render(<App />, reactRoot)

Answer 1

状态正确更新，此处缺少return关键字：

function Entries(props: { entries: string[] }) {
    return (
        <div className="entries">
            {props.entries.map((v, i) => {
                // add missing 'return'
                return <EntryDisplay msg={v} key={v} />
            })}
        </div>
    )
}

此外，请勿使用数组indexes as keys.

在反应中更新数组状态后，功能组件不会重新呈现

1 个答案: