- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有这种形式的数据:
books = [{
id: 1,
name: "book-1",
audiences: [
{
audienceId: 1,
name: "Cat A",
critics: [
{ id: 5, name: "Jack" },
{ id: 45, name: "Mike" },
{ id: 32, name: "Amanda" }
],
readers: [
{ id: 11, fullName: "Mike Ross" },
{ id: 76, fullName: "Natalie J" },
{ id: 34, fullName: "Harvey Spectre" }
]
}]
表格是嵌套的。每本书都有评论家和读者,会根据 AudienceId 的值来渲染每个表单
<div className="App">
{books.map((book, index) => (
<div key={book.id}>
<h1>Books {index + 1}</h1>
{book.audiences.map((au) => (
<div key={au.audienceId}>
<h3>{au.name}</h3>
<Recap
audiences={au}
shouldRenderCritics={au.audienceId === 2}
shouldRenderReaders={au.audienceId === 1}
criticsChildren={renderByAudience(au.audienceId)}
readersChildren={renderByAudience(au.audienceId)}
/>
</div>
))}
</div>
))}
</div>
这是根据 AudienceId 呈现的表单
return (
<div className="root">
<div>
{props.audienceId === 1 && (
<A
setReader={setReader(readerIdx)}
reader={selectedReader as IreaderState}
/>
)}
</div>
<div>
{props.audienceId === 2 && (
<B
setCritic={setCritic(criticIdx)}
critic={selectedCritic as IcriticState}
/>
)}
</div>
</div>
);
最后,对于每个读者/评论家,都有一个输入表格。
export default function A(props: Aprops) {
const handleChange = (
event: ChangeEvent<{ value: number | string; name: string }>
) => {
const { name, value } = event.target;
const r = { ...props.reader };
r[name] = value;
props.setReader(r);
};
return (
<div>
<TextField
name="rate"
type="number"
value={get(props.reader, "rate", "")}
onChange={handleChange}
/>
<TextField
name="feedback"
value={get(props.reader, "feedback", "")}
onChange={handleChange}
/>
</div>
);
问题
最佳答案
哇,这太棒了。最终问题源于您调用以下组件的事实:
export default function FormsByAudience(props: FormsByAudienceProps) {
const [critics, setCritics] = useCritics(props.books);
const setCritic = (index: number) => (critic: IcriticState) => {
const c = [...critics];
c[index] = critic;
setCritics(c);
};
// ...
// in render method:
setCritic={setCritic(criticIdx)}
对于每一个不同的评论家(和读者):
props.audiences.critics.map((c) => (
<div key={c.id}>
<div>{c.name}</div>
{props.shouldRenderCritics &&
props.criticsChildren &&
cloneElement(props.criticsChildren, { criticId: c.id })}
</div>
))}
在哪里
props.criticsChildren
包含
<FormsByAudience audienceId={id} books={books} />
.
critics
有许多单独的绑定(bind)。多变的。你没有一个
critics
对于整个应用程序或给定的受众;你有多个
critics
数组,每个评论家一个。为一位评论家的
critics
设置状态
FormsByAudience
中的数组不会导致对其他
critics
的更改其他评论家的 React 元素关闭的数组。
critics
正在从
props.books
创建数组,
critics
state 应该放置在使用书籍的同一级别附近,并且绝对不在嵌套映射器函数的组件内。然后将状态和状态 setter 传递给 child 。
readers
状态。
const people = ['bob', 'joe'];
const Person = ({name, i}) => {
const [peopleData, setPeopleData] = React.useState(people.map(() => 0));
console.log(peopleData.join(','));
const onChange = e => {
setPeopleData(
peopleData.map((num, j) => j === i ? e.target.value : num)
)
};
return (
<div>
<div>{name}</div>
<input type="number" value={peopleData[i]} onChange={onChange} />
</div>
);
};
const App = () => {
return people.map(
(name, i) => <Person key={i} {...{ name, i }} />
);
};
ReactDOM.render(<App />, document.querySelector('.react'));
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>
export default function App() {
const [critics, setCritics] = useCritics(books);
const [readers, setReaders] = useReaders(books);
const dataAndSetters = { critics, setCritics, readers, setReaders };
const renderByAudience = (id: number) => {
return <FormsByAudience audienceId={id} {...{ books, dataAndSetters }} />;
};
通
dataAndSetters
直到你到达
export default function FormsByAudience(props: FormsByAudienceProps) {
const { critics, setCritics, readers, setReaders } = props.dataAndSetters;
现场演示:
Recap
这样FormsByAudience
导入并调用 Recap
而不是在 parent 中。 renderByAudience
真的很奇怪(而且一目了然很难理解)创建一个有时永远不会被使用的 React 元素。Recap
评论家和读者有没有调换。这可能是无意的。这:<h5>Readers</h5>
{!isEmpty(props.audiences.critics) &&
props.audiences.critics.map((c) => (
应该是<h5>Readers</h5>
{props.audiences.readers.map((c) => (
(在映射数组之前不需要 isEmpty
检查)const selectedReader =
readers.find((r) => r.readerId === (props.readerId as number)) || {};
const readerIdx = readers.indexOf(selectedReader as IreaderState);
const selectedCritic =
critics.find((r) => r.criticId === (props.criticId as number)) || {};
const criticIdx = critics.indexOf(selectedCritic as IcriticState);
是不必要的。只需从父组件传递阅读器/评论家索引,然后使用 critics[criticIdx]
找到有问题的评论家。hook.ts
, 这:const byAudience = books
.map((b) => b.audiences)
.flat()
.filter((bk) => [1].includes(bk.audienceId));
简化为const byAudience = books
.flatMap(b => b.audiences)
.filter(bk => bk.audienceId === 1);
还有这个:byAudience.forEach((el) => {
el.readers.map((r) => {
return readersToSet.push({ feedback: "", rate: "", readerId: r.id });
});
return readersToSet;
});
没有意义,因为 forEach
忽略它的返回值,.map
仅应在从回调返回值以构造新数组时使用。使用 flatMap
在 byAudience
, 或插入 for..of
环形。const readersToSet = byAudience.flatMap(
el => el.readers.map(
r => ({ feedback: "", rate: "", readerId: r.id })
)
);
关于reactjs - useState 钩子(Hook)一次只能设置一个对象,并将同一个数组的另一个对象返回到初始状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66509491/
createHiveBackground 函数返回我要分配给状态的对象数组。稍后在我的应用程序中,我将使用 setHive 来更改数组的一些值。这些有什么区别? const [hive, setHiv
我很好奇为什么这么多程序员单独导入useState。 import React, { useState } from 'react'; const [foo, setFoo] = useState('
我已经设置了最基本的示例,即TODO列表当我第一次单击Done按钮时,它按预期工作:TODO项被标记为Done:True,并且“Fire”和“Setting”只触发一次。从那时起,我单击的任何按钮都会
我已经设置了最基本的示例,即TODO列表当我第一次单击Done按钮时,它按预期工作:TODO项被标记为Done:True,并且“Fire”和“Setting”只触发一次。从那时起,我单击的任何按钮都会
我正在尝试构建一个可以或不能接收查询字符串的代码。如果它收到所有查询字符串,我想执行一个函数: // state for query const [query, setQuery] = use
下面的代码有什么问题吗?使用 useState 时,我收到 typescript 警告 import * as React, { useState } from 'react' const useFo
我对此的反应是新的。我用每个开关元素创建了一个项目数组,问题是:当我单击一个项目时,所有项目都会同时激活!。我尝试了许多通过搜索找到的解决方案,但都不起作用。
我对此的反应是新的。我用每个开关元素创建了一个项目数组,问题是:当我单击一个项目时,所有项目都会同时激活!。我尝试了许多通过搜索找到的解决方案,但都不起作用。
我希望我没有重复一个问题。我看过这个:TypeError dispatcher.useState is not a function when using React Hooks ,但是我的应用程序运
当对状态、效果、上下文等使用钩子(Hook)时,我这样做: import React, { useState, useEffect, useContext } from 'react'; 但是,我注意
所以我试图在我的 nextjs 应用程序中使用 useState,但是一旦我添加了代码行来初始化 useState,它就会抛出一个带有错误消息的弹出错误:TypeError: Cannot read
我在单击表单提交按钮时使用 React useState 钩子(Hook)更新状态,直到第二次单击时状态才会更新。相信我需要使用 useEffect 但不确定如何使用 onClick 来实现。 con
是否可以从子组件内部更改 useState 的值? 家长: const [state, setState] = useState(false); return setState(true)}/> c
useState 不会立即更新状态。 我正在使用 react-select并且我需要根据请求的结果使用选择的 (multi) 选项加载组件。 出于这个原因,我创建了状态 defaultOptions
这个问题在这里已经有了答案: The useState set method is not reflecting a change immediately (15 个回答) 2年前关闭。 这是所有新
我想在触发正常函数 (handleConsultantChange) 后使用 useState 函数 (setFilterConsultantId) 更改状态 (filterConsultantId)
这是组件的完整代码,我累得想不出怎么解决这个问题 import React, { useEffect, useState } from 'react'; import { Link } from 'r
我正在尝试初始化一个常量变量,它可以用作字符串或字符串数组,具体取决于我的组件正在接收的 Prop 。 我正在尝试将其初始化为 const [selectedOptions, setSelecte
我有两个组件,一个放在另一个里面。子组件打印父组件传递的状态,并使用 useEffect 更新一次状态。在父组件中,我使用 setState(具有 bool 值的对象)并将状态传递给所有子组件。 父组
我们知道useState是FC中的一个hook,返回一个由两个元素组成的数组。第一个是状态变量,第二个是更新状态变量的函数。 const initialStateVariableValue = 0;
我是一名优秀的程序员,十分优秀!