如何在 state 和 props 更改时渲染组件? [英] How to render a component when state and props are changed?

问题描述

我需要显示 props 值(这是一个简单的字符串).每次我得到新的搜索结果时，我都会发送 props.
在第一次渲染时，props 将始终是 undefined.

Header.jsx

function Header() {const [searchString, setString] = useState('');const onChangHandler = (e) =>{setString(e.target.value);};const activeSearch = () =>{如果(searchString.length > 0){<首页搜索结果={searchString}/>;}};返回 (<div><输入占位符='在这里搜索'值={搜索字符串}onChange={(e) =>onChangHandler(e)}/><button onClick={activeSearch}>Search</button></标题>

);}

我搜索了之前的 stackoverflow 问题和 reactjs.org，但没有找到答案.

Home.jsx

import React, { useEffect, useState } from 'react';功能主页({搜索结果}){const [itemSearchResults, setResults] = useState([]);const [previousValue, setPreviousValue] = useState();//当 props 第一次被定义或改变时，什么函数会重新渲染?useEffect(() => {//不起作用设置结果(搜索结果)；}， [搜索结果]);返回 (<div><h3>主页</h3><h1>{itemSearchResults}</h1>

);}导出默认首页；

App.js

function App() {返回 (
<标题/><首页/><页脚/>
);}

我发送输入字符串只是为了检查 props 是否会在子组件(Home")发生变化.

这里的任何专家都知道是什么问题吗?

解决方案

为什么它不起作用?

这是因为 Home 组件从未使用过，即使它包含在以下代码段中:

<块引用>

const activeSearch = () =>{如果(searchString.length > 0){<首页搜索结果={searchString}/>;}};

activeSearch 函数有几个问题:

• 它被用作事件处理程序，尽管它使用 JSX (在渲染阶段之外)
• 它不返回 JSX (在渲染阶段仍然会失败)

JSX 应该只在 React 生命周期的渲染阶段使用.任何事件处理程序都存在于这个阶段之外，所以它可能使用的任何 JSX 都不会出现在最终的树中.

数据决定渲染什么

也就是说，解决方案是使用状态以便知道在渲染阶段要渲染什么.

function Header() {const [searchString, setString] = useState('');const [showResults, setShowResults] = useState(false);const onChangHandler = (e) =>{//避免每次字符更改都获取结果.设置显示结果(假)；setString(e.target.value);};const activeSearch = () =>setShowResults(searchString.length > 0);返回 (<div><输入值={搜索字符串}onChange={(e) =>onChangHandler(e)}/><button onClick={activeSearch}>Search</button>{showResults &&<主页查询={searchString}/>}

);}

useEffect 根据道具变化触发效果

然后，Home 组件可以通过 useEffect 触发对某个服务的新搜索请求.

function Home({ 查询}) {const [results, setResults] = useState(null);useEffect(() => {让discardResult = false;fetchResults(query).then((response) => !discardResult && setResults(response));//此返回的函数将在查询更改之前和卸载时运行.返回 () =>{//防止前一个慢的结果的竞争条件//请求可以覆盖加载状态或来自的最新结果//更快的请求.丢弃结果 = 真；//每当查询更改时重置结果状态.设置结果(空)；}}， [询问]);返回结果 ?(<ul>{results.map((result) => <li>{result}</li>))}</ul>) : `正在加载...`;}

确实，通过 useEffect 像 文章重点:

<块引用>

useEffect(() => {设置内部状态(外部状态)；}, [externalState]);

...但在我们的例子中，我们不是在同步状态，我们实际上是在触发一个效果(获取结果)，这正是 useEffect 甚至存在的原因.

const { useState, useEffect } = React;const FAKE_DELAY = 5;//秒函数首页({查询}){const [results, setResults] = useState(null);useEffect(() => {让 queryChanged = false;console.log('获取搜索结果', 查询);setTimeout(() => {如果(查询更改){console.log('查询自上次获取以来已更改，结果被丢弃', 查询);返回;}setResults(['example', 'result', 'for', query])}, FAKE_DELAY * 1000);返回 () =>{//防止竞争条件查询更改 = 真；设置结果(空)；};}， [询问]);返回 (<div>{结果 ?(<ul>{results.map((result) => (<li>{结果}</li>))}) : `正在加载...(${FAKE_DELAY} 秒)`}

);}函数头(){const [searchString, setString] = useState('');const [showResults, setShowResults] = useState(false);const onChangHandler = (e) =>{//避免每次字符更改都获取结果.设置显示结果(假)；setString(e.target.value);};const activeSearch = () =>setShowResults(searchString.length > 0);返回 (<div><输入占位符='在这里搜索'值={搜索字符串}onChange={(e) =>onChangHandler(e)}/><button onClick={activeSearch}>Search</button>{showResults &&<主页查询={searchString}/>}

);}ReactDOM.render(

, document.querySelector("#app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script><div id="app"></div>