Question

此代码在一个环境中运行良好：

const RenderAuthors = ({ fields }) => {
  const addAuthorField = () => { fields.push({}) }
  if (fields.length === 0) {
    addAuthorField()
    console.log("Enter here")
  }
  console.log("Fields************:" + fields.length)
  return (
    <ul style={style.authorsList}>
      {fields.map((member, index) =>
        <li key={index}>
          <Field
            name={`${member}.firstName`}
            type='text'
            component={RenderField}
            dataSource={nameList}
            hintText='Introduce el nombre del autor'
            muiComponent={AutoComplete}
            floatingLabelText='Nombre'
            openOnFocus={true}
            filter={MUIAutoComplete.fuzzyFilter}
          />
          <Field
            name={`${member}.lastName`}
            type='text'
            component={RenderField}
            dataSource={surnameList}
            hintText='Introduce el apellido del autor'
            muiComponent={AutoComplete}
            floatingLabelText='Apellido'
            openOnFocus={true}
            filter={MUIAutoComplete.fuzzyFilter}
          />
          <FloatingActionButton mini={true} style={style} onClick={() => fields.remove(index)} >
            <Delete />
          </FloatingActionButton>
          <FloatingActionButton mini={true} onClick={addAuthorField} >
            <PersonAdd />
          </FloatingActionButton>
        </li>
      )}
    </ul>
  )
}

字段为空，并执行addAuthorField函数。当我调试我的代码（Chrome调试工具和webpack）时，我看到RenderAuthors被重新渲染（我猜是因为字段prop已经改变了）并且使用字段进行渲染。我的console.log是：

Enter here
Fields************:0
Fields************:1

在另一个环境中（相同的React，redux-form，但不是webpack，Babel中的小差异），当我调试我的代码时：

执行addAuthorField，但没有重新渲染。我的console.log是：

Enter here
Fields************:0

关于如何猜测错误在哪里的任何想法？

Answer 1

UPPS！我在其他环境中忘记了减速机！

当prop改变时，无状态组件不会重新渲染

1 个答案: