useState hook 一次只能设置一个对象 return 同一数组的另一个对象为初始状态

Question

我有这种形式的数据：

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>
  );

最后，对于每个reader/critic，都有一个表格可以输入。

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>
  );

问题

每次我填写 critic/reader 的字段时，它都会为该对象设置状态，但也会为其余对象设置初始状态。它只设置焦点窗体的状态，不保留其他窗体的值

我不知道是什么原因造成的。

这是一个重现问题的沙箱 https://codesandbox.io/s/project-u0m5n

Answer 1

哇，这太棒了。最终问题源于您正在调用以下组件：

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)}

对于每个不同的评论家（和reader）：

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 变量有很多单独的绑定。您没有针对整个应用程序或给定受众的单个 critics；您有多个 critics 数组，每个评论家一个。在 FormsByAudience 中为 one 评论家的 critics 数组设置状态不会导致其他评论家的 React 元素关闭的其他 critics 数组发生变化.

要修复它，假设 critics 数组是从 props.books 创建的，critics 状态应该放在使用书籍的同一层附近，并且 绝对不在嵌套映射器函数的组件内。然后将状态和状态设置器传递给 children.

完全相同的事情适用于 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>

为了使 props 的传递更易于键入和阅读，您可以考虑将 4 个变量（2 个数据和 2 个设置器）合并为一个 object.

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;

现场演示：

https://codesandbox.io/s/project-forked-woqhf

如果我能提供一些其他建议，以显着提高您的代码质量：

更改 Recap，以便在 Recap 而不是 parent 中导入和调用 FormsByAudience。 renderByAudience 创建一个有时永远不会被使用的 React 元素真的很奇怪（而且很难一目了然）。

Recap 受到批评，reader 转过身来。这可能是无意的。这个：

<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);

不需要。只需从 parent 组件传递 reader/critic index，然后使用 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 忽略了它的 return 值，并且 .map 应该只在 return 从回调中获取一个值来构造一个新阵列。在 byAudience 上使用 flatMap，或者推入 for..of 循环。

const readersToSet = byAudience.flatMap(
  el => el.readers.map(
    r => ({ feedback: "", rate: "", readerId: r.id })
  )
);

useState hook 一次只能设置一个对象 return 同一数组的另一个对象为初始状态

useState hook can only set one object at the time and return the other object of the same array to initial state

state

reactjs

react-hooks

use-state